How to persist expanded rows beyond first level?

1 Answer 17 Views
Grid
Patrick
Top achievements
Rank 1
Patrick asked on 23 Feb 2022, 02:22 PM | edited on 23 Feb 2022, 05:45 PM

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!

1 Answer, 1 is accepted

Sort by
1
Accepted
Georgi Denchev
Telerik team
answered on 28 Feb 2022, 08:30 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Patrick
Top achievements
Rank 1
commented on 28 Feb 2022, 01:51 PM | edited

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
Top achievements
Rank 1
commented on 09 Mar 2022, 06:45 PM | edited

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
Telerik team
commented on 14 Mar 2022, 11:45 AM

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
Top achievements
Rank 1
commented on 17 Mar 2022, 02:26 PM | edited

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
Telerik team
commented on 22 Mar 2022, 11:53 AM

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

Tags
Grid
Asked by
Patrick
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or