How can I select a child node programmatically in dynatree?

Question

I am using jQuery dynaTree in my application and I want to programmatically select all child nodes when the parent node is selected. The structure of my tree is as follows

<div id = "tree"> <ul> <li>package 1 <ul> <li>module 1.1 <ul> <li> document 1.1.1</li> <li> document 1.1.2</li> </ul> </li> <li>module 1.2 <ul> <li>document 1.2.1</li> <li>document 1.2.2</li> </ul> </li> </ul> </li> <li> package 2 <ul> <li> module 2.1 <ul> <li>document 2.1.1</li> <li>document 2.1.1</li> </ul> </li> </ul> </li> </ul> </div> 

Now I want that when I click on a node tree with the heading "package 1", all of 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).

The following is the approach I tried to use:

 $("#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 value to the selected items $('#SelectedItems').val(selectedKeys.join(",")); if (flag) { child = dtnode.childList; alert(child.length); for (i = 0; i < child.length; i++) { var x = child[i].select(true); alert(i); } } }, checkbox: true, onActivate: function(dtnode) { //alert("You activated " + dtnode.data.key); } }); 

In the if(flag) state, I get all the child nodes of the element that the user selected, and it gives me the correct value, which I can see from the alert (child.length) statement. Then I run the loop to select all the children, but the loop never goes beyond the expression var x = child[i].select(true);

And I can never see the alert(i) statement executing. The result of the above statement is that if I select package 1, module 1.1 and document 1.1.1 are also selected, but it never executes the alert(i) operator - no other children of package 1 were selected. In my opinion, when the first child[i].select(true) statement is executed, it also fires an on select event for its children, thereby doing a recursion of the type

I think this is right? Regardless of what the recursion is or what it does, it does not end the loop and executes the following alert(i) command.

Please help me in solving this problem. I am dying to see this warning, any suggestion and help is greatly appreciated.

Answer 1

Tested, but you can try something like this:

 $(function(){ var inEventHandler = false; $("#tree").dynatree({ checkbox: true, selectMode: 2, [...] onSelect: function(select, dtnode) { // Ignore, if this is a recursive call if(inEventHandler) return; // Select all children of currently selected node try { inEventHandler = true; dtnode.visit(function(childNode){ childNode.select(true); }); } finally { inEventHandler = false; } } 

Answer 2

Despite the fact that I am not an expert in the internal capabilities of Dynatree, I wrote code that generates crackers for the clicked node and all its descendants.

In the example below, clicking on "edibles" displays:

 edibles edibles > fruits edibles > fruits > apples edibles > fruits > apples > green apples edibles > fruits > apples > green apples > granny smith edible > vegetables edible > vegetables > potatoes 

clicking on the "green apples", output:

 edibles > fruits > apples > green apples edibles > fruits > apples > green apples > granny smith 

You can draw inspiration from this example and extract the required fields from all child documents and generate your HTML output.

Code in this thread: Best way to generate text patterns from a PHP array having 3 columns (id, path, name)?

The PHP script itself is called from the Dynatree onActivate event handler through a jQuery.ajax({...}); request jQuery.ajax({...}); .