KendoTreeView hangs IE browser with 3000 plus record

4 posts, 0 answers
  1. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 15 Sep 2017 Link to this post

    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

  2. Neli
    Admin
    Neli avatar
    179 posts

    Posted 19 Sep 2017 Link to this post

    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.
  3. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 20 Sep 2017 in reply to Neli Link to this post

    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?
  4. Neli
    Admin
    Neli avatar
    179 posts

    Posted 21 Sep 2017 Link to this post

    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.
Back to Top