dynatree selectmode=3 is not honoured when using lazy loading

Question

I was trying to use dynatree with lazy loading on in my project. When I tried to combine the select functionality with the checkboxes and select mode 3 I was disappointed to see that the select rule for mode 3 which is select everything including children children .... children when the parent is selected. This is because the children havent yet been loaded.

Does anyone have a workaround to get this working ? I would very much appreciate any suggestions. Zank ya!!

Zack Zack · Accepted Answer · 2012-10-17T13:07:25

When adding the children of the parent you selected, check if the parent has children. If TRUE, add each child and set each of those children to selected.

Here is some code below. The onLazyRead will go up top. Every time you click on a lazy node, this function will trigger. Inside this function should be a call to your function that fetches child data for the node you just selected.

The code below that is the way I solved this problem. Pretty much all it is doing is checking if the parent of the node you are adding is selected. If TRUE, you add the node, then .select() it.

This is much simpler when deselecting a node because all the nodes are already loaded. When deselecting, just go down the hierarchy of the tree from the node that is being deselected and simply un-check each node.

I know this is a lot of code to just throw at you, but hopefully you can grasp the idea out of it. If you cannot, I will try to check back to this thread during work. Maybe you can even post what you have so far?

onLazyRead: function(node){

jQuery("#tree2").dynatree("getTree").disable();

        var pParentID = node.data.key;          

                    //Select the Node

        doChildReport(pParentID); //Get Children for this node's ID

    },


///....
//Methods to grab data from a "XMLHttpRequest GET" go here
//....

//When you finally want to add the children that you fetched using the ID of the node you selected...

//treeArray is an array of node data that has been parsed out of a 
//string returned by a "XMLHttpRequest GET"

//Contents of array in order, repeating: treeArray[0] = ParentID, [1] = nodeID [2] = nodeName
//Example, the array would return [111], [222], ["Child Node"]


if(){ //IF Next fetched node is on the last level, ie. no children
            //add normally
        }
    else{  //If NOT, add lazy.
        if(treeArray[1] != "nill" && treeArray[1] != undefined){

        //IF THE PARENT NODE IS SELECTED
        if(jQuery("#tree2").dynatree("getTree").getNodeByKey(treeArray[0]).isSelected() == true){

        //AND IF the child node does not exist
        if(jQuery("#tree2").dynatree("getTree").getNodeByKey(treeArray[1]) == null){

            //Add the child node and then mark it selected
            addChildNodeLazy(treeArray[1], treeArray[2], treeArray[0]);
            jQuery("#tree2").dynatree("getTree").getNodeByKey(treeArray[1]).select();
        }   
        }else{
            if( jQuery("#tree2").dynatree("getTree").getNodeByKey(treeArray[1]) == null){
                addChildNodeLazy(treeArray[1], treeArray[2], treeArray[0]);
            }
        }
    }
}

Lazy load function...

function addChildNodeLazy(NodeID, NodeName, ParentID){
        jQuery("#tree2").dynatree("getTree").getNodeByKey(ParentID).addChild({title: NodeName, key: NodeID, icon: false, isFolder: true, isLazy: true});
    }

dynatree selectmode=3 is not honoured when using lazy loading

2 Answers