KendoTreeView hangs IE browser with 3000 plus record

[Anamika]

Hello,

 

I have a Kendo treeview which loads on demand and i am using hierarchial data. So it only loads children when clicked on node . everything works fine till my records are more than 3000. In Firefox the tree loads in 5 seconds. But in IE the browser hangs and never recovers.

This is how my treeview looks

@(Html.Kendo().TreeView()
.Name("objtreeView")
.HtmlAttributes(new { style = "height:700px;overflow-x:hidden;" })
.DataImageUrlField("imageUrl")
.DataTextField("Text")
.LoadOnDemand(true)
.Template(
"# if (item.AdditionalImageUrl !='') { #" +
"<img src='#= item.AdditionalImageUrl#'/> #:item.Text#" +
"# } else {#" +
" #:item.Text#" +
"# }#"
)
.Events(events => events
.Select("onSelect")
)
.DataSource(dataSource => dataSource       
        .Read(readtree => readtree
.Action("ReadObjects", "Objekt").Data("addSearch")
)
)
)

 

And ReadObjects Looks like this

public JsonResult ReadObjects(string Id, string)
{

DataSet ds = cObjData.ReadObjects();
if ((ds != null) && ds.Tables.Count > 0)
{
//Alle Zeilen durchgehen
foreach (DataRow r in ds.Tables[0].Rows)
{

result.Add(new { Text = strText, id = r["ObjectID"].ToString(), Color = hexColor, hasChildren = bhaschildren, imageUrl = Url.Content(strImage), AdditionalImageUrl = "" });

}

return Json(result.AsQueryable(), JsonRequestBehavior.AllowGet);

}

 

In production sometimes we have 10,000 records to load. Any help is appreciated

 

Thanks

 

Anamika

[Neli]

Hello Anamika,

When working with a multi-level HierarchicalDataSource with large amount of data, the performance of the browser is expected to decrease, as loading all the nodes is a heavy operation.

In scenarios with very large data sometimes even loadOnDemand set to true may not be efficient enough. In such case one of the options is a custom implementation of paging the children. Such issue is discussed in this thread of Kendo UI Forum.

Another option is Kendo UI Grid widget to be used, which could be configured to show hierarchical data, and in addition virtualization or paging could be used to achieve better performance. Example of the Grid with hierarchical data configuration could be found on following Demo. 

Finally, there is a UserVoice topic where maybe you would like to vote for paging the child nodes to the Kendo UI TreeView. If the suggestion gain enough popularity, it may be considered for implementation. 


Regards,
Neli
Progress Telerik

[Anamika]

In Firefox it takes 5 seconds to load treeview with 6000 nodes. So only IE is the Problem and unfortunately pagination is not an Option. Is there some other fix for IE browser?

[Neli]

Hello,

Such performance issues are expected in IE, as the browser's DOM operations are relatively slower compared to the other modern browsers.
Currently, I could not suggest other workarounds than those described in my previous reply.


Regards,
Neli
Progress Telerik