This is a migrated thread and some comments may be shown as answers.

TreeView Performance

3 Answers 286 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Randy
Top achievements
Rank 1
Randy asked on 13 Dec 2012, 06:14 PM
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

3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 17 Dec 2012, 04:45 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Randy
Top achievements
Rank 1
answered on 18 Dec 2012, 01:30 AM
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
0
Daniel
Telerik team
answered on 19 Dec 2012, 02:37 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TreeView
Asked by
Randy
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Randy
Top achievements
Rank 1
Share this question
or