The Data Grid does not work properly with large datasets. In the example below with one million records, it is impossible to scroll to the bottom of the grid.
Firefox: Rows fail to render after scrolling past approximately 200,000 rows.
https://stackblitz.com/edit/react-aaxnyzxm?file=app%2Fapp.tsx
Hello, Hubert,
Thank you for describing the issue with scrolling through a million records in the KendoReact Grid. Unfortunately, the faced behavior is related to a browser max-element-height limitation that cannot be controlled by us.
Let me elaborate a bit. The KendoReact Grid’s row virtualization relies on the browser’s ability to calculate large scrollable areas. Browsers (especially Chrome and Firefox) impose internal limits on the maximum scroll height, which restricts how far you can scroll and, consequently, how high the skip value can go.
While virtualization renders only the visible rows for performance, it cannot bypass browser-imposed scroll limits. This is why, in your example, you cannot reach the last rows when working entirely client-side with a massive dataset.
For datasets with millions of records, you can consider combining paging and virtualization or using the RCS mode of the Grid. I hope the provided information will be helpful for you and the other clients facing the same behavior.
Regards,
Vessy
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.