[Solved] KendoReact Grid Freezes with Virtual Scrolling and Large API 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 returns the complete dataset at once, and for large datasets the Grid becomes very slow and the UI freezes.

Here is my current Grid 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}
  pageable={{
    buttonCount: 4,
    pageSizes: defaultPageSizes ?? [10, 20, 30, "All"],
    pageSizeValue: pageSizeValue,
    responsive: true
  }}
/>

Current issue:

• The API returns all records at once.

• For large datasets, the Grid becomes slow and the screen freezes.

• Virtual scrolling appears to work only after all data is loaded into memory on the client side.

 

[Vessy]

Hello, Tejas,

I have already answered your other thread on a similar matter, please refer my reply here:

https://www.telerik.com/forums/large-datasets-the-screen-becomes-stuck-freezes-because-the-grid-renders-too-much-data