1

I am loading more than 1000 nodes(including subnodes) into a dynatree and using a check box for each node to select.

But if we select all or deselect all like in a demo, http://wwwendt.de/tech/dynatree/doc/sample-select.html , it is very slow and browser hangs for 10 seconds.

Is there a fix?

Edit: A Tree has 6-8 levels nested. Each level have around 5-10 nodes.

Updated code

 <a href="#" id="select-all">select all</a>
 <div id="echoSelection"></div>
 <div id="my-tree"></div>

 $('#select-all').click(function(){
    alert($("#my-tree").dynatree("getRoot").length);
    $("#my-tree").dynatree("getRoot").visit(function(node){
            node.select(false);
        });
     return false;

});

 $("#my-tree").dynatree({
        initAjax: {
            url: 'jsonData.aspx',
            data: { type: "all" }
        },
        checkbox: true,
        selectMode: 3,
        onSelect: function (select, node) {
            // Display list of selected nodes
            var selNodes = node.tree.getSelectedNodes();
            // convert to title/key array
            var selKeys = $.map(selNodes, function (node) {
                return "[" + node.data.key + "]: '" + node.data.title + "'";
            });
            $("#echoSelection2").text(selKeys.join(", "));
        },
        onClick: function (node, event) {
            // We should not toggle, if target was "checkbox", because this
            // would result in double-toggle (i.e. no toggle)
            if (node.getEventTargetType(event) == "title")
                node.toggleSelect();
        },
        onKeydown: function (node, event) {
            if (event.which == 32) {
                node.toggleSelect();
                return false;
            }
        },

        fx: { height: "toggle", duration: 200 },
        autoCollapse: true
    });
}

JSON Format Sample

[
{"title":"Node 1","isFolder":false,"isLazy":false,"key":"1","icon":null,"prevNode":0,"nextNode":0,"children":[{"title":"Node 6","isFolder":false,"isLazy":false,"key":"6","icon":null,"prevNode":0,"nextNode":0,"children":[],"tooltip":null,"addClass":null,"expand":false,"MetaData":null}],"tooltip":null,"expand":false,"MetaData":null},{"title":"Node 2","isFolder":false,"isLazy":false,"key":"2","icon":null,"prevNode":0,"nextNode":0,"children":[],"tooltip":null,"expand":false,"MetaData":null},{"title":"Node 3","isFolder":false,"isLazy":false,"key":"3","icon":null,"prevNode":0,"nextNode":0,"children":[],"tooltip":null,"expand":false,"MetaData":null}]
Murali Murugesan
  • 22,423
  • 17
  • 73
  • 120
  • Is your code an aexact match to the demo? Are you lazy loading? Please post code. – J.Wells Nov 29 '12 at 12:05
  • 1
    Are you sure that is an accurate representation of your code? I just set [this](http://jsfiddle.net/ApCUS/20/) up on jsFiddle, and can select upwards of 62k nodes in chrome in under a second. Upwards of that and Dynatree throws a RangeError exception. Do you have anything binding to those events that might be causing additional processing to occur for each select event? Or perhaps some kind of recursion? – J.Wells Nov 30 '12 at 22:16
  • @J.Wells: Thanks. It looks good. However i tried selecting all the nodes with external button. Please see this fiddle what i was trying http://jsfiddle.net/tmXRV/3/ . But i could not able to do in your code. Please help me to do select all, deselect all with external button – Murali Murugesan Dec 01 '12 at 06:15
  • 1
    [Here](http://jsfiddle.net/JWells/tmXRV/8/) is an example which uses an `` tag to trigger selection of all nodes. To select all nodes, you may 1) iterate through every node via `.dynatree('getTree').visit(function(node){})` method and set every `node.select(true)`, or 2) you may set `selectMode:3` on the dynatree initialization which tells dynatree to auto-select children when a parent is selected, and trigger that via `.dynatree('getRoot').select(true)`. The iterative method (#1) is slower. The `.dynatree('getRoot').select(true)` method (#2) is quicker. – J.Wells Dec 01 '12 at 14:35
  • [Here's](http://jsfiddle.net/JWells/tmXRV/9/) a more descriptive fork of that jsfiddle dynatree – J.Wells Dec 01 '12 at 14:46
  • Sorry - just saw the second part of your question. To deselect all, it's the same basic principle except you would set `node.select(false)` in the visit iteration or `.dynatree('getRoot').select(false)` when dynatree is initialized with `selectMode:3`. – J.Wells Dec 01 '12 at 17:38
  • @J.Wells still i have a big issue. Its taking 30+ secs for loading 3000 nodes over all and totally 8 Levels. IE Shows script on this page causing Internet Explorer to run slowly. My client asking me to look for alternate tree view, if this is not fixed :( – Murali Murugesan Feb 14 '13 at 14:16
  • Upgrade to IE9, or even better - get rid of IE altogether and use a standards-adherent browser like Google Chrome. IE does this when processing larger jobs or a given task ties up the browser for 5+ seconds. Consider restructuring your js to load _n_ number of nodes into the dynatree at a time and continue to do so until all are loaded. This is not a dynatree problem. It's an IE/js problem. Any other plugin processing that amount of data without a better approach will likely cause the same behavior. – J.Wells Feb 14 '13 at 14:29
  • @J.Wells, Fine. Now i trying with http://wwwendt.de/tech/fancytree/demo/ fancytree. This looks exactly same as dynatree. But children with local array data is not working! Can you give some example with FancyTree and local array? – Murali Murugesan Feb 14 '13 at 14:42
  • @J.Wells, my client has more than 100 systems, all they are using IE 7 only now. They will upgrade to IE 8 only after Dec 2013 seems, as they are running some IE specific old applications designed :( – Murali Murugesan Feb 14 '13 at 14:44

1 Answers1

0

you can try lazy load and here is an example http://www.gehbeez.com/dynatree-lazy-load-example-with-asp-net/

Mahmoud ElMansy
  • 71
  • 1
  • 1