Grid temporarily jumps when paging in virtual scrolling

[Philip]

I've been struggling with an issue in our app where the grid is jumping all over the place during virtual scrolling. Then I noticed that the Kendo UI example does the same thing. I took this video from the StackBlitz in the "virtual scrolling with remote example" here. It's difficult to tell when watching in real time, because it happens so quickly, but while the loading indicator is up, the page jumps some 80 rows and then jumps back. This is exactly what we are seeing in our app, but since the load call is slower, about 1s, it's ends up looking really terrible.

I've attached some stills from the video that show the progression; as I scroll down, row 10346 is right at the bottom of the view. The call to pageChange comes in and suddenly row 10259 is at the bottom. A moment later the load finishes and 10351 is at the bottom, about what we expect, since we're scrolling down.

Thanks,

Philip

[Svet]

Hi Philip,

Thank you for the provided details.

The reason for the reported behavior is that on (pageChange) event, the Grid loads a new set of data which contains some of the already loaded items and some new items. In the demonstrated example, while the data is being fetched, the user scrolls the old data in the Grid, which causes the undesired behavior. Indeed, that is according to the implementation design of the virtual scrolling feature. Using that approach would be recommended when there isn't a large delay for fetching the new data set. Respectively if it take some time in order to fetch the new data then the undesired effect will be more visible. I understand that this may be disappointing, but currently there isn't a supported way that this effect could be completely avoided other than reducing the time needed to fetch the data.

What we could suggest as a workaround is to use some custom CSS in order to hide the old rows while fetching the new ones when using virtual scrolling. Please check the following updated example demonstrating such approach:

https://stackblitz.com/edit/angular-khdqv6-dh5fjt?file=app/app.component.ts

That will ensure that once the new data is fetched the scroll will be at the same item where the fetching began.

I would also like to add, that we have a plan to add a new loading indicator for the Grid, which should solve the reported undesired behavior when using virtual scrolling. Basically, once it is available the functionality would be similar to the virtual scrolling feature of the Telerik UI for Blazor Grid:

https://demos.telerik.com/blazor-ui/grid/virtual-scrolling

However, at this point we are unable to provide a fixed deadline as to when it will be released as it depends on multiple factors such as work load, availability of resource etc.

Last but not least, when the Grid uses virtual scrolling with remote data we also recommend to debounce the pageChange event so that is isn't fired every time. That limits the number of requests sent and makes the scrolling smoother in general. Please check the following article demonstrating that recommendation:

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-debouncing-pagechange-events

I hope the provided details help. Please let me know in case any further information is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

[Philip]

Has this behavior changed in this latest release? I see this comment in the latest release notes but I don't know what it means:
"Grid & TreeList: Responsive Pager
Both the Kendo UI for Angular Grid and TreeList UI components have updated their internal pager component to be fully responsive."

[Dimiter Madjarov]

Hi Philip,

This release note indicates that by default (unless disabled) the Grid & TreeList components will handle the responsiveness of their pagers i.e. show/hide pager elements depending on the width of the component. Additional details could be found here:

https://www.telerik.com/kendo-angular-ui/components/treelist/paging/#toc-responsive-pager

Regards,

Dimiter