treeview takes lot of time to load

4 posts, 0 answers
  1. Sapandeep
    Sapandeep avatar
    13 posts
    Member since:
    Jan 2012

    Posted 13 Jun Link to this post

    I have a requirement to create an hierarichal treeview on my page. which has around 1600  parent nodes and each parent nodes may have child node ranging from 2 to 20. So i am dealing with large amount of data. i am able to create a Hierarchical datasource and then binding datasource to treeview taking almost 5 minutes and its slowing down the whole page. Following is the configuration i am using for treeview.

    i checked that i can't do paging in treeview. also i have loadonDemand set to true. is treeview able to handle such large chunk of data , if not what other tool i can use to display data in parent-child order? Please let me know

     

    $("#tvLosDiag").kendoTreeView(
                    {
                        loadOnDemand: true,
                        dragAndDrop: false,
                        dataTextField: ["CategoryDescription", "DescriptionWithCode"],
                        checkboxes: {
                            template: "<input type='checkbox' name='checkedNode' #=(item.Checked) # />",
                            checkChildren: true
                        },

                        check: function (e) {
                        }
                    });

  2. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 15 Jun Link to this post

    Hello Sapandeep,

    When working with a complex multi-level datasource like the one described, it is expected for the browser to take some time to load all of the nodes as this is a resource heavy operation. The recommended approach is to use the loadOnDemand option (as you have already tried), which significantly reduces the load time.

    However, in you case this will not work as efficiently because of the amount of data that needs to be loaded. I have performed some tests with the following Dojo. Indeed it takes some time to load all of the nodes - 10 parents with 5 levels nested (20 children). 

    What I can suggest is to try loading this complex data in the Grid widget which can be configured to show a hierarchy. You can observe this behavior in the following Grid Hierarchy demo. Additionally, you will be able to use virtualization or paging to reduce load time significantly.

    I hope this helps. In case you have any other related questions, please do not hesitate to contact us.

    Regards,
    Dimitar
    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. Sapandeep
    Sapandeep avatar
    13 posts
    Member since:
    Jan 2012

    Posted 24 Jul Link to this post

    Hi Dimitar,

     

    i implemented hierarchical grid with selected column and also got the same treeview functionality written in change event of  parent and child grids to check and uncheck parent child items etc.I Also implemented paging on both parent and child grid level But still i am getting very slow response and screen is almost freezing in IE. do you have some other  recommendation ?

  4. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 25 Jul Link to this post

    Hello Sapandeep,

    You can try using serverPaging, as in this way the Kendo UI Grid will load smaller chunks of data which will lead to improved performance. 

    Regarding IE, such performance issues are expected, as the browser's DOM operations are relatively slower than that of other modern browsers. To optimize the performance for IE, you can try decreasing the DataSoucre's pageSize, which will force less DOM elements to be rendered. 

    Also, I would suggest opening a separate support ticket related to the Grid, where you can provide a runnable example that demonstrates the performance issue. This way, we will be able to examine it locally and provide you with further assistance.

    Regards,
    Dimitar
    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