Kendo Treeview Expanding big tree issue

Question

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.

Answer 1

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.

1. Change your tree use server side Expand method.
2. When you call expand, you should make sure the node is expanded.

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.

1. Change your tree to use server side Expand method:
   Please see Kendo UI's demos for Binding to Remote Data in this link. Note that loadOnDemand should be set to true. In addition the server side Expand web service should be implemented too.

2. When you call expand, you should make sure the node is expanded:
   In order to do this, there should be an event like Expanded defined in Kendo UI TreeView, but unfortunately there is none, except Expanding event. Using setTimeout in this case is not reliable, because the network is not reliable. So we ended up using a while statement to check that the node's children are created or not. There might be a better solution for this, however this satisfies our current requirement. Here's the change you should make when expanding nodes:

   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.

Answer 2

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?