title: How can I select child node programmatically, in dynatree?
body: <p>I'm using jQuery's dynaTree in my application and I want to select the all the child nodes programmatically when a parent node is selected. The structure of my tree is as follows</p>
  
  <pre><code>&lt;div id = "tree"&gt;
      &lt;ul&gt;
         &lt;li&gt;package 1
           &lt;ul&gt;
             &lt;li&gt;module 1.1
                &lt;ul&gt;
                  &lt;li&gt; document 1.1.1&lt;/li&gt;
                  &lt;li&gt; document 1.1.2&lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/li&gt;  
              &lt;li&gt;module 1.2
                 &lt;ul&gt;
                   &lt;li&gt;document 1.2.1&lt;/li&gt;
                   &lt;li&gt;document 1.2.2&lt;/li&gt;
                 &lt;/ul&gt;
             &lt;/li&gt;
          &lt;/ul&gt;
       &lt;/li&gt;
       &lt;li&gt; package 2
          &lt;ul&gt;
            &lt;li&gt; module 2.1
              &lt;ul&gt;
                 &lt;li&gt;document 2.1.1&lt;/li&gt;
                 &lt;li&gt;document 2.1.1&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>Now what I want is that when I click on tree node with title "package 1" all its child nodes i.e (module 1.1, document 1.1.1, document 1.1.2, module 1.2, document 1.2.1, document 1.2.2) should also be selected.</p>
  
  <p>Below is the approach I have tried to use:</p>
  
  <pre><code>$("#tree").dynatree({
          onSelect: function(flag, dtnode) {
              // This will happen each time a check box is selected/deselected
              var selectedNodes = dtnode.tree.getSelectedNodes();
              var selectedKeys = $.map(selectedNodes, function(node) {
  
                  //alert(node.data.key);
                  return node.data.key;
  
  
              });
              // Set the hidden input field's value to the selected items
              $('#SelectedItems').val(selectedKeys.join(","));
  
              if (flag) {
                  child = dtnode.childList;
  
                  alert(child.length);
                  for (i = 0; i &lt; child.length; i++) {
                      var x = child[i].select(true);
                      alert(i);
                   }
              }
          },
          checkbox: true,
          onActivate: function(dtnode) {
              //alert("You activated " + dtnode.data.key);
          }
  
  
      });
  </code></pre>
  
  <p>In the <code>if(flag)</code> condition I get all the child nodes of element that is selected by user and it gives me the correct value that I can see from alert(child.length) statement. Then I run the loop to select all the children but loop never goes beyond the statement <code>var x = child[i].select(true);</code></p>
  
  <p>And I can never see the statement <code>alert(i)</code> being executed. The result of above statement is that if I select package 1, module 1.1 and document 1.1.1 is also selected but it never executes the <code>alert(i)</code> statement  - no other children of package 1 are selected. In my view when first time <code>child[i].select(true)</code> statement is executed it also triggers the on select event of its children thus making a recursion kind of thing</p>
  
  <p>Is my thinking correct? No matter what recursion or what on earth it does, it does not complete the loop and execute the very next instruction <code>alert(i)</code>. </p>
  
  <p>Please help me in solving this problem. I'm dying to see that alert, any suggestion and help is highly appreciated.</p>