This is a migrated thread and some comments may be shown as answers.

Grid grouping with Virtual Scrolling issues

9 Answers 64 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Alexey
Top achievements
Rank 1
Veteran
Alexey asked on 11 Aug 2020, 07:33 PM

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

9 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 12 Aug 2020, 06:27 AM

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

0
Alexey
Top achievements
Rank 1
Veteran
answered on 21 Nov 2020, 01:51 PM

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

0
Alexey
Top achievements
Rank 1
Veteran
answered on 22 Nov 2020, 04:41 PM

Another issue - it falls into a loop

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

0
Vasil
Telerik team
answered on 24 Nov 2020, 02:07 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Alexey
Top achievements
Rank 1
Veteran
answered on 24 Nov 2020, 02:10 PM
Is there a way to make the grid usable with grouping?
0
Stefan
Telerik team
answered on 25 Nov 2020, 02:04 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Alexey
Top achievements
Rank 1
Veteran
answered on 29 Nov 2020, 04:54 PM
Hi. Is there a way to use TreeList + virtual scrolling + infinity loading?
0
Alexey
Top achievements
Rank 1
Veteran
answered on 29 Nov 2020, 08:41 PM

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

0
Stefan
Telerik team
answered on 30 Nov 2020, 07:16 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Alexey
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Alexey
Top achievements
Rank 1
Veteran
Vasil
Telerik team
Share this question
or