[Solved] large datasets the screen becomes stuck/freezes because the Grid renders too much data

[Tejas]

I am using @progress/kendo-react-grid version 8.2.0 with virtual scrolling enabled.

Currently, virtual scrolling works correctly only when all data is loaded on the client side. My API sends the complete dataset at once, and for large datasets the screen becomes stuck/freezes because the Grid renders too much data.

Here is my current configuration:

<Grid
  scrollable={scrollPagination ? "virtual" : "scrollable"}
  skip={scrollPagination ? scrollModePage.skip : page.skip}
  take={scrollPagination ? scrollModePage.take : page.take}
  data={scrollPagination
    ? expandedData.slice(0, scrollModePage.take)
    : expandedData}
  total={totalCount}
  onPageChange={pageChange}
  rowHeight={rowHeight ?? 60}
/>

[Vessy]

Hello, Tejas,

The behavior is expected when a very large dataset is loaded at once and the Grid is still doing client-side work for all records. A more scalable approach is to switch virtual scrolling to server-driven paging (`skip/take`) and bind only the currently visible records:

• https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes/virtual
• https://www.telerik.com/kendo-react-ui/components/grid/paging 

Two key adjustments usually resolve this:

1. Set a fixed Grid height so virtual scrolling can calculate the viewport.
2. Provide only current-page data and request new records on `onPageChange` (with debounce).

In addition, KendoReact Grid v10.0.0 introduces significant performance architecture improvements, particularly for applications working with large datasets and complex enterprise-level tables. We strongly recommend upgrading to it in order to take full advantage of these enhancements. The improvements are focused on achieving faster rendering, smoother scrolling, reduced memory consumption, and more efficient React state management, resulting in a more responsive and scalable user experience.

I hope the provided information will be helpful for you.

Regards,
Vessy
Progress Telerik