I have a pretty involved Grid I'm building that involves both grouping and detail rows.
The documentation uses setExpandedState with an array of collapsedIds. This sets the 'expanded' field for everything in the grouped data. It even sets the 'expanded' field for the actual grid rows.
I would like to be able to toggle the detail row and hide it, but in order to do that, I have to create a 'groupId' property for each grid row entry so that setExpandedState doesn't assign 'expanded' as true.
Is there a different way to do this? It seems odd that I would have to set a 'groupId' property each grid row's data when it is not itself a group.
Just upgraded and tested with 5.14.0, but it happened in 5.13 as well.
1 Answer, 1 is accepted
Hi, Patrick,
The approaches used for controlling the expanded/collapsed state for groups (here `setExpandedState` is used) and detail rows are different, because of the structure that is being used in both scenarios. One has a hierarchical structure with nested items and the other uses flat data.
Nevertheless, for integrating grouping with details row, I would suggest using the implementation of our overview example:
The overview demo is using a slightly different approach for handling the expanded/collapsed state. Please give it a try and let me know if using that approach is suitable for your exact scenario.
Regards,
Wissam
Progress Telerik
Rank 1
Hi, Wissam.
I see the Overview example mutates the dataItem from onExpandChange directly, then resets the data with a shallow copy of the data.
I'll give it a try.
Rank 1
Hi, Wissam.
After looking at the overview example, I noticed the following:
- Updating a group's expanded field updated the post-processed results.
- Anything that updated the behavior or the dataState triggered process() again, replacing the post-processed results.
So if you e.g. update a sort or filter selection, a collapsed group instantly becomes expanded. The group that was mutated to include `expanded: false` is gone because process() recalculates the groups.
In my useEffect hook I've just replaced groupBy() with process(), then called setExpandedState() on the results for process. I'm not what effect that will have for performance on my page, but it seems to work for now.
Hi Patrick,
When multiple features are enabled for the Grid, using the "process" method would be the recommended approach, because it will handle the entire dataState with all sort, filter, group expressions and the paging. As for the expanded state, as my colleague Wissam have mentioned, when the data is grouped it will have different structure and the parent items will be group items. The expanded state of the items in both cases, grouping and detail rows, is determined by the same "expanded" field, which makes the combination of both a little bit tricky, but setting the "expanded" property to the items (regardless of if they are group items or data items) is what should be done after the "process" method.
Please note that there is no recommended way for handling the expanded state or the data in the Grid in general and there could be many combinations or approaches for manipulating the data. The Grid is just an UI component that displays the data that is set to the "data" property.
Nevertheless, I just wanted to share another approach for including almost all of the Grid's features (including selection):
You will notice that there are some differences in the way that the group items and the detail rows are handled, but the result is still the same as in our overview demo.
Rank 1
Konstantin,
Thanks for the complete example. I wasn't aware of mapTree(). Implementing a similar 'setExpandedState' with it and taking care to differentiate expanded data rows and group rows seems straightforward.
Much appreciated!