How to persist expanded rows beyond first level?

[Patrick]

How to persist expanded rows beyond one level?

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/state/persist-expanded-rows

I have used documentation found at the above link and it is working to a point. However, I have a a grid that had 4 levels. 

Level 1 (each row has drop down)

Level 2 (each row has drop down)

Level 3 (each row has drop down)

Level 4

Can anyone explain or show me how you would keep all rows expanded if you have multiple levels?

The documentation above will keep only expanded rows opened from Level 1. But, I need to keep level 2 and level 3 rows expanded if they are open.

I do not understand how to do this likely because I am so fresh to JS, Jquery, and telerik controls in general.

 

Thanks!

[Georgi Denchev]

Hello, Patrick,

I've already provided an answer in the other forum thread, however I will copy my response here as well.

With multiple levels of hierarchy you'll need to extend the logic a bit. 

First define two arrays that will hold the indexes of the expanded rows for the child(second level) and grand child(third level) grids. 

When the refresh button is clicked, find the expanded rows in each sub grid. If the rows are part of the second level, save their indexes in the first array. If they are part of the third level then save the indexes in the second array. 

Then attach a dataBound event to the second and third level grids. When the dataBound event is fired, locate the rows of the corresponding grid by using the indexes and expand these rows. 

You can repeat the same process for as many levels as you want, simply declare a new array and extend the conditional statements. 

Updated Dojo: 

https://dojo.telerik.com/@gdenchev/oBUCECuF 

Best Regards,
Georgi Denchev
Progress Telerik

[Patrick]

Georgi Denchev,

The example is exactly what I was looking for. However, there seems to be several problems.

Databound even for level 2 is never fired. If I manually open it to view the third level, it kicks off the rest of them.

aria-expanded is always null if it is expanded or collapsed. So ".k-master-row:has(tr[aria-expanded='true'])" never returns any results.

 

[Patrick]

I think part of the problem is that this is all done as HTML and mine is all in backend JS. I do not know, I implemented exactly as you have but on back end.

[Georgi Denchev]

Hi, Patrick,

It is a bit difficult to determine the exact problem without having the example itself. You can target the k-i-collapse icon instead of the aria-expanded attribute and see if that makes a difference. The icon(same as the attribute) will be rendered only when a row is expanded.

// Find which rows are expanded.
          $(".k-master-row:has(.k-i-collapse)").each((i, x) => {

I've updated the Dojo:

https://dojo.telerik.com/@gdenchev/oBUCECuF 

Best Regards,

Georgi

[Patrick]

Hi Georgi,

 

In your example, if I expand all child elements in row 1 and expand row 2 once and refresh. Because we are using index, it expands all items in second row as they are expanded in the first. Is there a UID of each row that stays with the row after refresh?

EDIT:

I was able to use data-uid in order to get past this issue. Everything is working as inteneded, next step is to keep scrolled position after grid refresh. Thanks for being so helpful Georgi!

[Georgi Denchev]

Hi, Patrick,

I am glad you managed to resolve the problem and thank you for sharing the solution!

My suggestion would've been to add second attribute to the child div element which holds the "id" of the parent, similar to what is shown in this Dojo:

https://dojo.telerik.com/@gdenchev/idIqiCAm 

The example wouldn't behave 100% correct in this case because the data for all sub-grids is the exact same, which means that the ids are also the same, however in a real-world scenario where each id is unique, the above suggestion should function properly.

As for the scroll position, you could get the current scroll offset at the beginning of the refresh function and then programmatically update it after the Grids rebind.

Best Regards,

Georgi