When grouping the grid, not all rows are displayed.

[Andrei]

I use a grid with grouping and virtual scrolling. In the example, the length of the data array is 20, take is 10. If we group the grid, we will see only 10 elements.  When sorting a group, the data changes, but there are still 10 of them. How do I create grouped data correctly so that all groups and all data are displayed?

https://stackblitz.com/edit/react-kkjtitaq?file=app%2Fapp.tsx,app%2Fgd-sample-products.ts

Thanks!

[Filip]

Hello, Andrei,

With virtual scrolling enabled, the Grid uses the take and skip parameters from its dataState to determine how many rows to render. If take is set to 10, only 10 items are processed and displayed, even when grouping is active. This means only a subset of the grouped data appears at a time, which can hide some groups or group members depending on how the data is sliced. Setting the take to 20 will show the entire data array in this case:

• https://stackblitz.com/edit/react-kkjtitaq-hyxrqgxf?file=app%2Fapp.tsx

I hope this helps, however feel free to reach out to me again in case  further questions arise on this matter.

Regards,
Filip
Progress Telerik

[Andrei]

Hello!

Your solution loses the point of virtualization with a large amount of data. My example was simplified. My real case uses thousands of rows of data. But my take is 100, which allows me to display the data quickly. I can't just change take to 20,000 to see all the rows when grouping. We need another solution. Everything worked in version 5 of the grid, but after upgrading to version 11, it stopped working.

Thanks!

[Filip]

Hi, Andrei,

Thank you for the provided clarification on your scenario, and you are correct that simply changing take is not feasible in a real-world app with more data. 

After further inspection I was able to find a solution which avoids slicing the data before grouping by removing skip/take from the process(...) call, then passing the entire grouped data to the Grid along with a total value that reflects the flat count of all visible rows (group headers plus expanded items). With this approach, virtualization uses skip and take only to control how many rows are rendered in the viewport, while all groups and all underlying data remain available for scrolling and expansion. I have modified the previously sent example with this approach:

• https://stackblitz.com/edit/react-kkjtitaq-y5fvw8dy?file=app%2Fapp.tsx

It seems that all of the data and groups is now visible. I hope this helps, but please let me know in case the issue persists on your end.

Regards,
Filip

[Andrei]

Hello!

Do I understand correctly that with each use of the grid with grouping and virtualization, additional logic (several workarounds) will need to be written that will solve this problem?
Maybe we should consider correcting the incorrect behavior inside the Grid component, so as not to solve this problem locally every time? In previous versions of the Grid, virtualization grouping worked by default, without unnecessary additional local workarounds. After all, I use a large number of grids in my project, as do many other users.

Thank you for understanding!

[Filip]

Hi, Andrei,

I agree that we should consider resolving the issue within the Grid. I also tested the component with older versions, and in those cases, the entire data was indeed shown. I will reach out to the dev team, since a lot of changes have been made to the virtualization, to check whether this was intentional or a bug in the Grid component. I’ll get back to you once I have more information.

Regards,
Filip