Grid grouping with Virtual Scrolling issues

[Alexey]

Hi. I'm implementing a Grid with grouping and virtual scrolling. It i see it have some defects when I do scrolling. I created an example to demonstrate that and recorded a small video. Please take a look and tell me if I do anything wrong.

 

https://stackblitz.com/edit/react-tvh32r?file=app/main.jsx
https://take.ms/r6Cia

 

Thanks

[Stefan]

Hello, Alexey,

Thank you for your example.

This is expected as when the Grid is grouped the rows and the groups have a dynamic height. This leads to an empty space at the end of the Grid that corresponds to that difference.

We have a GitHub item logged long ago for this and the developers are monitoring for an approach that will fix this case. One possible approach is the one we have for Angular where this only works if all records are present on the client. This is not ideal as well because if the data set has millions of records a request to fetch such amount of data can take very long to get. This is why we work with only part of the data, but this leads to the scrolling issue at the end as we do not know how long a group is as we do not have the entire data.

https://github.com/telerik/kendo-react/issues/188

Regards,
Stefan
Progress Telerik

[Alexey]

I'm facing another issue when I have it fully scrolled bottom and I scroll up slightly it navigates me to top of the grid

https://monosnap.com/file/qthGGVcElJ6cgsOxcUEuTJb0qHuemm

[Alexey]

Another issue - it falls into a loop

https://monosnap.com/file/7KxNnATOa4s08qoTnanUQHESOczYSJ

[Vasil]

Hi Alexey,

Thank you for the additional information. I have licked back the forum into the issue, so we can track it in one place. 

Regards,
Vasil
Progress Telerik

[Alexey]

Is there a way to make the grid usable with grouping?

[Stefan]

Hello, Alexey,

We have added suggestions for improvements in the GitHub items.

If the current state of the Grid with grouping is unacceptable, these are the available options:

1) Comment in the issue to add the option with all items available.

2) Use the TreeList component as it has a different virtualization logic and can also wort with tree data:

https://www.telerik.com/kendo-react-ui-develop/components/treelist/virtualization/

3) Use the Grid without row virtualization, only with column virtualization based on the number of items. The Grid will render fast with around 500 to 1000 records.

4) Use the paging functionality of the Grid to improve the performance. The paging is working as expected with grouping.

 

Regards,
Stefan
Progress Telerik

[Alexey]

Hi. Is there a way to use TreeList + virtual scrolling + infinity loading?

[Alexey]

2) So I need it to display 20 lines initially. When I scroll down it loads extra more lines and it displays only those lines that should be visible at the moment. TreeList works well, but it seems it works only with Pager type pagination

3) virtualising columns could work, but my grid is editable and if I have a thousand rows and start editing it will work very slow since I need to modify a huge array and grid does remount all rows every time anything happen

4) the paging doesn't work in my case since clients don't like this

[Stefan]

Hello, Alexey,

1) Is there a way to use TreeList + virtual scrolling + infinity loading? - The virtual scrolling and infinity loading are two separate concepts. The virtual scroll only renders the visible elements to speed up the loading where the infinite scroll renders all elements but starts with a small number. Still, with infinite loading, if the users scroll a lot, all items have to be rendered and the operation can still become slower.

2)  So I need it to display 20 lines initially. When I scroll down it loads extra more lines and it displays only those lines that should be visible at the moment. TreeList works well, but it seems it works only with Pager type pagination - Could you please share if there is a specific issue with using only the virtualization in its current state?

3) virtualising columns could work, but my grid is editable and if I have a thousand rows and start editing it will work very slow since I need to modify a huge array and grid does remount all rows every time anything happen - We have an improvement on a Pull request that will re-render only the updated rows and not all of them. This should help speed up the editing.

4) the paging doesn't work in my case since clients don't like this - Thank you for the clarification on this one.

Regards,
Stefan
Progress Telerik