Kendo.TreeView - Very slow loading

[Baracskai]

Hello,

We try load ~3-4000 treenodes to treeview but it is very slow. Building the treeview after the datasource is available is ~2 minutes.

The database query duration is few seconds.

Our code:

            $("#tvFormulaTree").kendoTreeView({
                template: "#if (item.Clickable) {# <a id='" + "#=item.id#" + "' onclick='handleFormulaTreeViewDblClick(\"" + "#=item.FullPathName#" + "\"" + ");' >#=item.Name#</a> #} else {# #=item.Name# #}#",
                name: 'tvFormulaTree',
                dataTextField: "Name",
                dataSource: dsFormula,
                loadOnDemand: false
            });
 
 
 
    var dsFormula = new kendo.data.HierarchicalDataSource({
        transport: {
            read: function (options) {
                $.ajax({
                    type: "POST",
                    url: '@Url.Content("~/DD/GetFilteredTreeDataAsync")',
                    dataType: 'json',
                    traditional: true,
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
 
                        options.success(result);
                    }
                });
            }
        },
        schema: {
            model: {
                id: "id",
                children: "Children"
            }
        }
    });
 

Can you help please, how can we speed-up this?

Thank you!

[Baracskai]

We try create a html-cache to speed up the control. Details about this:

I am using jquery kendoTreeView control to show large number of items. The rendering process takes too long so I decided to create some caching mechanism to store the rendered control.

I use this treeview on a Partial View.

I am cloning the rendered kendoTreeView using the jquery clone(true, true) command into an invisible div on the Main View and when I open the Partial View I clone it back instead of creating a new one.

 

                $("#yellowBox > #tvFormulaTree").replaceWith($("#cachedFormulaTree > #tvFormulaTree").clone(true, true));

                $("#tvFormulaTree").kendoTreeView();

The treeView appears but the basic events don’t work anymore so I cannot expand / collapse the nodes.

Can you help me how to do this?

 Thank you!

 

[Ianko]

Hi Baracskai,

The proper and supported way to optimize the TreeView rendering is by using the loadOnDemand: true option. In your case you have it to false, which forces the TreeView to render all nodes instead of loading them on demand (when a parent node is expanded). 

As for the caching solution you have, you can try to destroy the treeview and reinitialize it from the DOM that is rebuilt from the caching mechanism. Similarly to this initialization option: https://demos.telerik.com/kendo-ui/treeview/basic-usage. 

Regards,
Ianko
Progress Telerik