Grid Pagination, Filter, and Sorting with REST API

[Ika]

Hi,

I am trying to make a page with the grid that gets data from a Flask REST API. The data received is paginated. From the grid I also want to allow the user to filter and sort the data, which should make a request to the backend API, to receive filtered, sorted, and paginated data.

I have previously done this in Telerik Blazor using the OnRead function. I overwrote the OnRead function to automatically make a request upon filter, sort, or page change . Looking through the Kendo React documentation, I can't figure how to use DataSource with a REST API, the documentation seems to use OData. Is there something like Telerik Blazor OnRead, which I can use in Kendo React, or do i need to use functions like OnPageChange, OnFilterChange, to bind this functionality with the API?

For example, this is the kind of data i get from the API:

{
    "metadata": {
        "page": 1,
        "perPage": 50,
        "total": 120,
        "totalPages": 3
    },
    "assignments": [
        {
            "createdAt": "2025-02-20T00:00:00",
            "updatedAt": "2025-06-11T11:23:26.913674"
        }
    ]
}

 

And with the request on page change, on filter, or on sort, I would want to get the page, filter, sort data, and put them into query parameters to pass to the endpoint. I have attached an example image of query params I have from Postman below. 

I would highly appreciate it if anyone can help me figure out implement this functionality, ideally using a function like Telerik Blazor OnRead.

Thanks!

[Filip]

Hello, Ika,

The KendoReact Grid does not have a direct equivalent to Blazor's onRead, but you can achieve the same result using the onDataStateChange event. This event fires whenever the user changes paging, sorting, filtering, or grouping, and provides all necessary parameters in a single place. This allows you to make a single API call to your Flask backend whenever the Grid state changes.

How to Implement Server Data Operations with KendoReact Grid

• Use the onDataStateChange event to capture all data operations (paging, sorting, filtering).
• In the event handler, extract the relevant values from dataState and serialize them as query parameters for your Flask API.
• When the data is returned from the backend, provide it and the total count to the Grid.

Sample Implementation:

import { Grid } from '@progress/kendo-react-grid';
import { useState, useCallback } from 'react';

const MyGridComponent = () => {
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(0);
  const [dataState, setDataState] = useState({ skip: 0, take: 50 });

  const fetchData = useCallback(async (state) => {
    const { skip, take, sort, filter } = state;

    // Prepare query parameters for your API
    const params = new URLSearchParams({
      page: skip / take + 1,
      perPage: take,
      // You may need to serialize sort/filter objects as your API expects
      // Example: sortField, sortDir, filterField, filterValue, etc.
    });

    // TODO: Serialize sort and filter if needed for your API
    // params.append('sort', ...);
    // params.append('filter', ...);

    const response = await fetch(`/api/assignments?${params.toString()}`);
    const result = await response.json();

    setData(result.assignments);
    setTotal(result.metadata.total);
  }, []);

  const onDataStateChange = (event) => {
    setDataState(event.dataState);
    fetchData(event.dataState);
  };

  return (
    <Grid
      data={data}
      total={total}
      pageable
      sortable
      filterable
      skip={dataState.skip}
      take={dataState.take}
      onDataStateChange={onDataStateChange}
    />
  );
};

I hope this helps.

Regards,
Filip
Progress Telerik

[Ika]

Hi Filip,

Thanks for your response, I think I understand how it works now. I've got the pagination to work, will let you know if I run into any issues with sorting and filtering.