Expanding and Collapsing Detail Grid becomes slow

[Fernando]

Hello everybody.

I have an interface with a tree of kendo grids made with detail grids. These grids are built dinamically depending on how many levels the loaded data has. The data comes from outside the grid, so it is set manually. Everything ok until here. The thing is that I need all the detail grids rendered at the load of the interface, so I did a routine which expands and collapses all details only to make sure they (their html in DOM)are all generated. But this routine becomes slow and sometimes freezes the tab for a few seconds while executing if the data is somewhat big. What I want to ask is if there is any other way to do that with more performance than the way I did. Here is the demo: http://dojo.telerik.com/@marcio/OKiPARAb.

The routine is as below:

let generateDetailAllLevelsRecursive = function generateDetailAllLevelsRecursive($grid) {
    let grid = $grid.data("kendoGrid");

    $grid.find(".k-master-row").each(function() {
        let $row = $(this);

        grid.expandRow($row);

        generateDetailAllLevelsRecursive($row.next(".k-detail-row").find(".k-grid"));
        grid.collapseRow($row);
     });
 };

 

Thanks in advance.

[Stefan]

Hello, Fernando,

Thank you for the example.

After inspecting it I noticed that this will generate recursively 10241 Grids at the same time. Creating 10241 numbers of Grids simultaneously is an extremely heavy operation and most of the browsers and machines will not be able to handle it.

If the data can have so many levels of nesting we can recommend using TreeList as this widget is recommended when working with N levels of hierarchical data:

https://demos.telerik.com/kendo-ui/treelist/index

https://docs.telerik.com/kendo-ui/controls/data-management/treelist/overview

Let me know if you need additional information on this matter.

Regards,
Stefan
Progress Telerik

[Fernando]

Thank you for your reply, Stefan. 

Say I have to use that kind of structure, a Treelist doesn't fits for me because each level has it own columns, and ok, I have overcharged the demo with that amount of data, it will be less than that, but still a little slow. So considering that, do you have any suggestion to make my algorithm to expand details better or that is best way it can be done?

Thanks!!

[Stefan]

Hello, Fernando,

The used approach is the recommended one as it is using the built-in method of the Grid. The method is actually a very simple one as it is just programmatically clicking the expand arrow:

expandRow: function(tr) {
    $(tr).find('> td .k-i-expand').click();
},

The delay is caused by the reason that there is a large number of Grids being initialized at the same time. For example, initializing 1000 Grids on the page without any nesting, just plain Grid will still be noticeably slow. We understand that this is a requirement, but this is mostly connected to how the browser and the machine are able to render such a large DOM tree. For example, on my end setting the recursive value to 7 is generating 128 Grid for generate-details: 4528.7119140625ms which is nearly acceptable for such number of Grids.

Let me know if we can further assist on this.
 
Regards,
Stefan
Progress Telerik