Kendo Treeview Expanding big tree issue

I have created a tree control using kendo TreeView.it has more than 10,000 nodes and i have used loadOnDemand false when creating Tree. I am providing a feature to expand the tree by its level, for this i have created a method which takes the parameter "level" as number and expand it accordingly and user can enter 15 (max level) into the method, it works fine with 500 to 600 nodes for all the levels but when tree has more than 5000 nodes than if user is trying to expand above the 2nd level nodes then browser hangs and shows not responding error.

Method which i have created to expand the tree is :-

function ExapandByLevel(level, currentLevel) {
  if (!currentLevel) { 
    currentLevel = 0;
  }
  if (level != currentLevel) {
    var collapsedItems = $("#treeView").find(".k-plus:visible"); 
    if (collapsedItems.length > 0) {
        setTimeout(function () {
            currentLevel++;

            var $tree = $("#treeView");
            var treeView = $tree.data("kendoTreeView");

            var collapsedItemsLength = collapsedItems.length;
            for (var i = 0; i < collapsedItemsLength; i++) {
                treeView.expand($(collapsedItems[i]).closest(".k-item"));
            }
            ExapandByLevel(level, currentLevel);
        }, 100);
    }
    else {
        //console.timeEnd("ExapandByLevel");
        hideLoading();
    }
  }
  if (level == currentLevel) {

    hideLoading();
  }
}

call above given method like this:-

ExapandByLevel(15);

here 15 is level to expand in tree.

when tree has more than 5000 nodes than if user is trying to expand above the 2nd level nodes then browser hangs and shows not responding error. please suggest any way to do this,what i want is expand the tree which can contains more than 5000 nodes.

I had a similar problem with kendo TreeView, when I wanted to load a tree with 30,000 nodes. The browser would freeze for a long time to load this number of nodes even when loadOnDemand was set to true.

So we decided to implement the server-side functionality for expanding nodes, and that's what you should do. You need to have 2 changes in your existing code.

These two steps will be explained below. The thing you should know is, this way your browser doesn't hang at all, but it may take some time to complete the operation, because there will be so many webservice calls to the server.

if (collapsedItems.length > 0) {
    currentLevel++;

    var $tree = $("#treeView");
    var treeView = $tree.data("kendoTreeView");

    var collapsedItemsLength = collapsedItems.length;
    for (var i = 0; i < collapsedItemsLength; i++) {
        var node = $(collapsedItems[i]).closest(".k-item")
        if (!node.hasChildren)
            continue; // do not expand if the node does not have children
        treeView.expand(node);
        // wait until the node is expanded
        while (!node.Children || node.Children.length == 0);
    }
    ExapandByLevel(level, currentLevel);
}

You can also do the expand calls in a parallel way in order to decrease the loading time, but then you should change the way you check if all the nodes are expanded or not. I just wrote a sample code here that should work fine.

Hope this helps.

The solution to your problem is pretty simple: Update the version of Kendo UI that you are using since they have optimized (a loooooooooot) the code for HierarchicalDataSource and for TreeView .

Check this: http://jsfiddle.net/OnaBai/GHdwR/135/

This is your code where I've change the version of kendoui.all.min.js to v2014.1.318. I didn't even changed the CSS (despite you should). You will see that opening those 5000 nodes is pretty fast.

Nevertheless, if you go to 10000 elements you will very likely consider it slow but sorry for challenging you: do you really think that 10000 nodes tree is User Friendly? Is a Tree the correct way of presenting such a huge amount of data?

上一篇: 在媒体查询中使用“全部”有什么好处？

下一篇: Kendo Treeview扩大大树问题