jQuery - dynatree lazy loading and multi-hier (type 3) selectMode

Question

I'm using dynatree with the selectMode set to 3 (multi-hier). I'm also using checkboxes, so when you select a folder, all children below it are also selected.

I have have (and need) lazy loading enabled.

The problem is that dyna tree does not load all children when selecting a folder. It only selects children that have previously been loaded.

I'd like it to do the necessary lazy-loading to get all available children before it makes its multi-hier selection.

might be a good place to start showing some code – Mark Schultheiss Mar 19 '12 at 23:05 — Mark Schultheiss, Mar 19 '12 at 23:05

score 1 · Answer 1 · answered Mar 21 '13 at 17:28

I worked around this by forcing selection on parent after lazy read:

onLazyRead: function (node) {
    if (!node.data.isLeaf) {
        node.appendAjax({
            success: function (node, event) {
                node.toggleSelect();
                node.toggleSelect();
            }
        });
    }
}

GJK · Answer 2 · 2013-06-26T21:26:43.443

I know I'm a little late to the party, but I found a solution to this as well. Hopefully it helps somebody.

First, you'll need an onSelect handler for the tree (if you don't already have one). When a node is selected, mark it as selected, then expand it if possible. Here's mine:

onSelect: function(selected, node) {
    if (selected === true) {
        node.data.activateChildrenOnLoad = true; //Let the lazy children know
        //node.expand(true) did not work for me, but it might for you
        if (!node.isExpanded()) {
            node.toggleExpand();
        }
    }
}

Next, you need to insert a bit of code into your onLazyRead function. I handle all AJAX manually, so if you let dynatree handle it for you, you might need to change some things.

onLazyRead: function(node) {
    getNodesFromServer(function(nodes) {
        node.addChild({
            selected: node.data.activateChildrenOnLoad,
            activateChildrenOnLoad: node.data.activateChildrenOnLoad
        });

        if (node.data.activateChildrenOnLoad) {
            var nodes = node.getChildren();
            var last = nodes[nodes.length-1];
            if (!last.isSelected()) {
                last.toggleSelect();
            }
            if (!last.isExpanded()) {
                last.toggleExpand();
            }
        }
    });
}

And that's all there is to it. When you select (check) a node, it will recursively load, check and expand all of its lazy children.

score 1 · Answer 3 · answered Mar 29 '12 at 17:21

If I am reading this right, you are trying to have the children 'checked' when you 'check' the parent? And this does not work because when using lazy loading, the children don't exist yet.

I worked around this by checking if parent of the child I am adding on lazy load is 'selected'. If the parent is 'selected', I load the child already selected.

Here is some code for you to look at. I am getting my tree data from an XMLHTTPREQUEST.
treeArray[0] = ParentKEY, treeArray[1] = ChildKEY, and treeArray[2] = ChildTITLE

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

/*
*If treeArray[0] "ParentKEY" is selected, create the child already selected.
*/

if(jQuery("#tree2").dynatree("getTree").getNodeByKey(treeArray[0]).isSelected() == true){
    if( jQuery("#tree2").dynatree("getTree").getNodeByKey(treeArray[1]) == null){
        addChildNode(treeArray[1], treeArray[2], treeArray[0]);
        jQuery("#tree2").dynatree("getTree").getNodeByKey(treeArray[1]).select();
    }
}else{
    if( jQuery("#tree2").dynatree("getTree").getNodeByKey(treeArray[1]) == null){
        addChildNode(treeArray[1], treeArray[2], treeArray[0]);
    }
}

jQuery - dynatree lazy loading and multi-hier (type 3) selectMode

3 Answers3