React Grid Virtual Scrolling with Server Paginated Data

[Laura]

Hello! I am trying to get a Grid with Virtual Scrolling working where the data is fetched as needed, as opposed to all loaded in at once. I have not managed to get it working locally. All of the documentation I have been able to find has examples with all the data pre-loaded into the React state, which is not feasible in our use case. Would you be able to provide any examples on how this is expected to be done? I have been looking into `onPageChange` and `onDataStateChange` but cannot determine how they are intended to be used here. Is it expected that the new data is returned from these functions? Or is it expected that, once the data is fetched, the overall `data` variable passed into the grid is manipulated (sliced) to only pass in the expected rows given skip and take?

[Filip]

Hi, Laura,

For the scenario in which the data is fetched from a remote service with virtual scrolling, I can recommend debouncing the `pageChange` event. I can share the following example that showcases this approach here:

https://stackblitz.com/edit/react-vrczzb?file=app%2Fmain.jsx

the debouncing logic can be found in the requestIfNeeded function:

const requestIfNeeded = skip => {
    for (let i = skip; i < skip + pageSize && i < orders.length; i++) {
      if (orders[i].OrderID === undefined) {
        // request data only if not already fetched
        requestData(skip);
        return;
      }
    }
  };

I hope this helps.

Regards,
Filip
Progress Telerik