Under Review
Last Updated: 17 Jul 2024 01:55 by ADMIN
Stoyan
Created on: 09 Jul 2024 09:15
Category: Data Grid
Type: Bug Report
3
Data Grid with virtual scrolling scrolls (jumps) to top when the total number of records changes

We use data grids with virtual scrolling for inline editing a large number of records. However, when we want to add a new row to the grid it automatically resets the scroll position and doesn't even fire onPageChange event so the records you see do not correspond to the scroll position.

Check the following example (scroll to bottom, click anywhere on the table - this will add a new row - and observe the described problem):

https://stackblitz.com/edit/react-52zzvz?file=app%2Fapp.tsx%3AL78

3 comments
ADMIN
Konstantin Dikov
Posted on: 17 Jul 2024 01:55

Hi Stoyan,

I do understand that this could be inconvenient for some scenarios, but the virtual scrolling is not suitable for scenarios where the data will change dynamically. If the number of item changes, the Grid will reset its scroll position, because it will render a new virtual scrollbar and the old position will not be relevant anymore. Please note that the "virtual" scrollbar height is set based on the total number of items and when that changes, it creates a new scrollbar and in order to avoid any issues with the new data, it resets the scroll position. The same behavior is observed if you filter the Grid with enabled virtual scrolling.

Nevertheless, if you want to keep the scroll position, you can store the scrollTop value and the original skip value and re-apply them after changing the data:

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Stoyan
Posted on: 10 Jul 2024 10:20

Hello Konstantin,

The problem is not that onPageChange is not fired (this was just an observation of inconsistent behavior), but that the scroll is reset. There is no reason for the scroll to be reset:

Imagine the user scrolled to line number 590 and clicked on a button to insert a new row below - suddenly their scroll position is reset and they have to wonder where they were before in that huge list of items.

ADMIN
Konstantin Dikov
Posted on: 09 Jul 2024 19:57

Hello Stoyan,

Thank you for providing an example demonstrating the problem.

We will have to discuss this scenario within the team to see if changing the total value dynamically should fire the onPageChange event, since the scroll position is reset. Nevertheless, with the current implementation you can manually reset the "skip" value to "0" when you change the data count:

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!