TreeView Performance

[Randy]

I am having problems with speed as the data set grows. I have a JSON object of data that I create a hierarchical array from and then bind that array to the TreeView. The same data is displayed in a GridView without the hierarchical portion, so the TreeView is maybe 10-20% bigger, in terms of number of nodes. The time is off by almost 2 orders of magnitude. Trapping before and after the TreeView initialization as well as before and after the grid gives me this.

Count	Tree	Per	Grid	Per
62	5.385	0.08685	0.677	0.01092
119	13.69	0.11504	0.729	0.00613
199	32.096	0.16129	0.892	0.00448
265	58.09	0.21921	2.007	0.00757
351	89.012	0.25360	1.878	0.00535
402	72.118	*	1.345

* The last load with 402 items only has 4 branch nodes, Root, which as 3 children. All 402 are attached to one of the three children.

The number are in seconds. What I find very interesting is the time per is pretty consistent in the GridView, but grows in the TreeView faster than I think the added hierarchical data would allow for. The data is divided up into 4 levels, root, plus 3.

The real problem is of course 90 seconds to load a tree with 351 leafs. I re-ran with flattening the structure so that there were only the root, 3 branches and 402 leafs. That took 72 seconds, which is much better than the 90 for the 351 with more structure, but still too long for a user to wait, for not that much data.

The tree is fairly simple:
    $("#treeview").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },
        select: function (e) {
            showDetailByNode(e.node)
        },
        template: kendo.template($("#treeview-template").html()),
        checkboxTemplate: kendo.template($("#treeview-checkbox-template").html()),
        dataSource: myShipmentsTree
    });

    <script id="treeview-checkbox-template" type="text/kendo-ui-template">
        # var name = "checkedFiles[" + item.id + "]"; #
        <input type="checkbox" name="#= item.text #" data-id="#= item.id #" data-status="#= item.Status #" value="true" id="chk#= item.text #" # if (item.items) { # class="treecheckbox" data-node="false" # } else { # class="treecheckbox itemnode" data-node="true" # } #/>
    </script>
    <script id="treeview-template" type="text/kendo-ui-template">
        # if (item.hasChildren) { #
            <span class="itemText itemGrouping">#= item.text #</span>
            (#= item.items.length #)
        # } else { #
            # if (item.Status == "V") { #
                <div id="itemLeaf#= item.id #" class="itemText itemLeaf strikeThrough" style="width: 100%;" data-id="#= item.id #" >#= item.text #</div>
            # } else { #
                <div id="itemLeaf#= item.id #" class="itemText itemLeaf" style="width: 100%;" data-id="#= item.id #" >#= item.text #</div>
            # } #
            <div id="itemButtons#= item.id #">
                <a class="statusImage status#= item.Status #" ></a>
            </div>
        # } #
    </script>

I removed the logic from the templates, but that didn't make any difference. It took more time, 75 seconds, but I suspect my computer was just a little busier.

    <script id="gridviewButton-template" type="text/kendo-ui-template">
        <div class="hiddenData" data-id="#= ID #"></div>
        <a class="statusImage status#= Status #" ></a>
    </script>
    <script id="treeview-checkbox-template" type="text/kendo-ui-template">
        # var name = "checkedFiles[" + item.id + "]"; #
        <input type="checkbox" name="#= item.text #" data-id="#= item.id #" data-status="#= item.Status #" value="true" id="chk#= item.text #" # if (item.items) { # class="treecheckbox" data-node="false" # } else { # class="treecheckbox itemnode" data-node="true" # } #/>
    </script>

Am I doing something wrong, or is this the speed to be expected from it?

Thanks
Randy Miller
TransGuardian

[Daniel]

Hello Randy Miller,

The difference with the Grid is that the TreeView uses a HierarchicalDataSource and a separate dataSource needs to be initialized for the children of each item. To defer creating the child dataSources and speed up the loading, you should use the loadOnDemand option e.g.

$("#treeview").kendoTreeView({
    loadOnDemand: true,
    checkboxes: {
        checkChildren: true
    },
    select: function (e) {
        showDetailByNode(e.node)
    },
    template: kendo.template($("#treeview-template").html()),
    checkboxTemplate: kendo.template($("#treeview-checkbox-template").html()),
    dataSource: myShipmentsTree
});

Regards,
Daniel
the Telerik team

[Randy]

I would expect the tree to run a little longer, but the time seems to be extreme for such a small data source. Reducing the number of levels in the tree didn't have that big of a reduction in time. The last last test I ran with 402 nodes was divided up in to a root node plus three child nodes. Even if you allowed the fill length for all of the nodes more than the grid the time would be 1.345 secs x 4 total nodes = 5.38 secs. The tree actually took 72.118 secs. 53 times longer than the grid.

If that is just the nature of the TreeView, than that is fine, but it much more than I would expect.

Randy

[Daniel]

Hello Randy Miller,

Did you try with the loadOnDemand option? If you have tried it but the performance have not improved, please check this sample and let me know if I am missing something and if you experience the same delay on your side?

Regards,
Daniel
the Telerik team