very slow performance on big TreeView refresh

4 posts, 0 answers
  1. Sara
    Sara avatar
    2 posts
    Member since:
    Mar 2017

    Posted 19 Feb 2018 Link to this post


    I am trying to do the following: I copy some data from one TreeView to another They share a DataSource and essentially all I do is set value A to value B, while TreeView1 displays A and TreeView2 displays B.

    My steps are:

    1) I expand all nodes (loadOnDemand is true so the initial page load doesn't take too long).

    2) After the expand is done I copy said data and

    3) update the treeView by using node.load() 

    (as recommended in this older thread:

    Now, this is working as expected, but as soon as the DataSource gets a bit bigger it gets really slow. My test Data has about 200 items in 3 layers and in IE it takes about 50s for the "node.load()" alone to finish. (Chrome is a lot better with about 5s, but unfortunately I have to use IE.)

    I tried a lot of other ways to refresh or reload the TreeViews, but sadly nothing worked for me. I can't read the DataSource again, since my edits are only client-side at this point. A setDataSource() made no changes, as well as simply setting the DataSource (not that the last one is unexpected, but I was getting desperate...)

    Does anyone here have a solution for me? Maybe I'm missing something really obvious?




  2. Neli
    Neli avatar
    394 posts

    Posted 21 Feb 2018 Link to this post

    Hi Sara,

    I have replied in the other thread regarding the same issue. For your convenience I will paste my reply here as well.
    I would suggest you to keep the conversation in a single thread.

    In general, when working with multi-level HierarchicalDataSource, the performance is expected to decrease with large data sets. This is a resource heavy operation, which depends on the browser JavaScript engine. Performance issues in IE are expected as the browser's DOM operations are relatively slower than the other modern browsers.

    By using the load() method, the entire TreeView will be rendered again, so multiple DOM elements needs to be recreated and processed and rendered, which is a slow operation. As mentioned above such performance issues are expected especially in IE. 

    The idea of loadOnDemand is to load the children of the node only after the parent is selected. In case you are expanding all the nodes initially, you are retrieving the data for all the nodes. So, It seems that the loadOnDemand is not suitable for your scenario, as you do not have any benefits from using it.

    I have prepared a Dojo example where on about 200 nodes the text is changed by a button click (nodes are not actually copied). Could you please try to modify it accordingly, so to replicate the way you copy data from one TreeView to the other. This will help us to examine the issue locally and provide further assistance?

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Nencho
    Nencho avatar
    1881 posts

    Posted 04 Jan 2019 Link to this post


    Just as follow up - we've implemented some major improvements, regarding the TreeView performance. Below you can find a blog post describing the enhancement that we are releasing with the upcoming R1 2019:

    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Sara
    Sara avatar
    2 posts
    Member since:
    Mar 2017

    Posted 04 Jan 2019 in reply to Nencho Link to this post

    Thank you for the heads up! I will check out the new release. :)

    - Sara

Back to Top