Expand/Collapse All JavaScript timeout

[IT Help Desk]

Hi,

I am running into the dreaded "A script is causing IE to run slowly" problem with expand and collapse all.  There are about 4000 items in the tree, but only about 50 or so are not leaf items.

Expand/Collapse all sample
http://www.telerik.com/help/aspnet-ajax/tree_clientexpandingcollapsing.html

I have tried both of these with no luck
http://www.telerik.com/help/aspnet-ajax/troubleshooting-treeview-script-causes-ie-run-slowly.html

Any other suggestions for getting this to not time out?  I have the same tree using Dyanmic Drive Simple Tree menu (http://www.dynamicdrive.com/dynamicindex1/navigate1.htm) and it is able to expand and collapse all just fine.

TIA

[Nikolay Tsenkov]

Hi Jason Nam,

You can timeOut the expand of the items with setTimeout (function (){ ... },0);
Please try that out for lets say timeOut of every 20 node expansions and let me know the results.

Hope this solves it!


Regards,
Nikolay Tsenkov
the Telerik team

[IT Help Desk]

Hi,

I have tried a few different ways with no luck.  Chrome and Firefox work without the modification.  IE still timing out every time.

I attached a data file to the support ticket, can you please try and reproduce on your side?  I am using  IE 8 on Windows 7 64bit.

Thanks

Here is the original:

function treeExpandAllNodes() {
    var treeView = $find("<%= rtvMain.ClientID %>");
    var nodes = treeView.get_allNodes();

    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].get_nodes() != null) {
            nodes[i].expand();
        }
    }
}

Here is try one:

function treeExpandAllNodes() {
    setTimeout(function () {
        var treeView = $find("<%= rtvMain.ClientID %>");
        var nodes = treeView.get_allNodes();

        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].get_nodes() != null) {
                nodes[i].expand();
            }
        }
    }, 0);
}

Here is try two:

function treeExpandAllNodes() {
    var treeView = $find("<%= rtvMain.ClientID %>");
    var nodes = treeView.get_allNodes();
    var currentNode;

    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].get_nodes() != null) {
            currentNode = nodes[i];
            if (i % 20 == 0) {
                window.setTimeout(function() { currentNode.expand(); }, 0);
            }
            else {
                nodes[i].expand();
            }
        }
    }
}

[IT Help Desk]

I figured this out on my own.  The majority of my nodes were leaf nodes, so no reason to be calling .expand() or .collapse() on those nodes.  Just adding this check fixed the issue.

function treeExpandAllNodes() {
    var treeView = $find("<%= rtvMain.ClientID %>");
    var nodes = treeView.get_allNodes();

    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].get_nodes() != null) {
            if (nodes[i].get_nodes().get_count() != 0) {
                nodes[i].expand();
            }
        }
    }
}

function treeCollapseAllNodes() {
    var treeView = $find("<%= rtvMain.ClientID %>");
    var nodes = treeView.get_allNodes();

    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].get_nodes() != null) {
            if (nodes[i].get_nodes().get_count() != 0) {
                nodes[i].collapse();
            }
        }
    }
}

[Nikolay Tsenkov]

Hello Jason Nam,

Great that you solved the problem!
And thanks for posting it here!

Hope you will not experience any more hard time with our controls.


Regards,
Nikolay Tsenkov
the Telerik team