New (stable) virtual scrolling mode for the Grid

[kdikov82]

With the current implementation there are many issues caused by the re-calculation of the scroll position, the rendering of the items, missing items in the view while scrolling, etc.

The new virtual scrolling mode should provide more stable functionality and focus only on virtual scrolling with fixed row height (as in Kendo UI). Also, for simplifying the implementation, we should limit the number of rows to the browser`s limit of the height of the scrollbar (unless we implement our own scrollbar).

Functionalities/changes to be considered:

• Providing top and bottom buffer for the items in the DOM, which could allow us to fire the onPageChange only when the current view moves out of the rendered items
• There should be no re-calculation of the scroll position after scrolling. There is no problem in having the first item in the view be half visible or almost hidden and having a top buffer will allows us to remove the re-calculation
• Detail rows can be supported only by providing detailRowHeight (as in Kendo UI)
• Implementing our own scrollbar. The benefits of this will be increased performance and more control over when to trigger the onPageChange.

[kdikov82]

Additional problems with video and example can be found in Ticket ID: 1571916. The problems in question are related with rows with different height

[vveesseelliinnaa]

One more flickering issue with virtual scrolling used in React.StrictMode, reported in Ticket ID: 1579042

[robv8r]

I've also experienced the flickering issue without React.StrictMode

https://github.com/telerik/kendo-react/issues/1374#issuecomment-1244471870

[veej]

is there any news here?

[nstoychev]

Hi @veej,

We plan to publish only virtualization fixes for our January 2023 release, no new virtualization modes. At the moment, we work on fixing the flickering, removing the re-calculation and performance improvements.

[plevamatus]

Hello @nstoychev, is there any progress regarding this issue? I'm using version 5.11.0 and flickering is still there.

[nstoychev]

Hi @plevamatus,

We have implemented new virtualization logic (module) and this task is on testing stage at the moment. I'll post an update here once we publish a develop version.

[nstoychev]

We published the "stable mode" of the virtual scrolling in version 5.11.1-dev.202302071533. The changes are the following:

• The virtualization can now work with both all data and sliced data. rowHeight must be set.
• detailRowHeight must be set in the case with details, and all data must be passed to the Grid
• For the grouping scenario, pass all data

We added memorization of the data and columns in the Grid, so pass the data and/or columns in a new array only when it's changed.

Examples:

• basic scenario, sliced data - https://stackblitz.com/edit/react-3epszd?file=app%2Fmain.jsx
• basic scenario, all data - https://stackblitz.com/edit/react-j7g84q?file=app%2Fmain.jsx
• Grouping and details case, all data - https://stackblitz.com/edit/react-e1z3cc?file=app%2Fmain.jsx

Tested in React 17, React 18 and React 18 + strict mode.