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

KendoTreeView hangs IE browser with 3000 plus record

3 Answers 29 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Anamika
Top achievements
Rank 1
Anamika asked on 15 Sep 2017, 08:35 AM

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

3 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 19 Sep 2017, 06:35 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Anamika
Top achievements
Rank 1
answered on 20 Sep 2017, 02:23 PM
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?
0
Neli
Telerik team
answered on 21 Sep 2017, 11:24 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TreeView
Asked by
Anamika
Top achievements
Rank 1
Answers by
Neli
Telerik team
Anamika
Top achievements
Rank 1
Share this question
or