Kendo.TreeView - Very slow loading

1 Answer 35 Views
TreeView
Baracskai
Top achievements
Rank 1
Baracskai asked on 13 Dec 2021, 11:23 AM

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
Top achievements
Rank 1
commented on 14 Dec 2021, 12:58 PM

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!

 

1 Answer, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 16 Dec 2021, 09:07 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
TreeView
Asked by
Baracskai
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Share this question
or