Grid React - Can't get pagination to work.

[pavlo-o-savchuk]

Hello,

Request: Implementing Server-Side Paging in the Grid Component I have explored all available options, including the documentation, Google, and ChatGPT, but haven't found a solution for my use case. Here's what I am trying to achieve:

I need to implement a trivial case of server-side paging for the grid component.

Current Scenario: My data resides on the server. When I fetch data, I only request 10 rows at a time, along with a pagination object.

Project: React Typescript.

Desired Behavior: When I switch from page 1 to page 2, the grid should send a request to the server to fetch the next 10 rows. The server should handle all data slicing, and the client should only display the requested rows for the active page.

Please check the following screenshot: I have 15 rows in the db. I want to display only 5 rows at a time and 3 buttons which are a page numbers. So, when I press on the page 2 or page 3 I send a new request to the server requesting the desired chunk of data.

What I currently have:

Component Code:

import React, { useEffect, useState } from "react";
import {
  GridComponent,
  ColumnsDirective,
  ColumnDirective,
  Page,
  Inject,
} from "@syncfusion/ej2-react-grids";
import SoilCaseService from "../../Api/SoilCaseService";

const TestGrid: React.FC = () => {
  const [data, setData] = useState<any[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await SoilCaseService.getAllPagination2();
       
        setData(result.data.items); // Set the fetched data to state
      } catch (error) {
        console.error("Error fetching pagination data", error);
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      <GridComponent
        dataSource={data}
        allowPaging={true}
        pageSettings={{ pageSize: 5, enableQueryString: true }}
        height={500}
      >
        <ColumnsDirective>
          <ColumnDirective
            field="id"
            headerText="Id"
            isPrimaryKey={true}
            visible={false}
            showInColumnChooser={false}
          />
          <ColumnDirective
            field="legal_no"
            headerText="Anvisning"
            textAlign="Left"
            width="80"
          />
          <ColumnDirective
            field="product_no"
            headerText="Produkt Nr."
            textAlign="Center"
            width="80"
          />
          <ColumnDirective
            field="offer_name"
            headerText="Tilbudsnavn"
            textAlign="Left"
            width="130"
          />
          <ColumnDirective
            field="worklocation_address_nickname"
            headerText="Arbejdssted"
            textAlign="Left"
            width="130"
          />
        </ColumnsDirective>
        <Inject services={[Page]} />
      </GridComponent>
    </div>
  );
};

export default TestGrid;

Grid Version: "@syncfusion/ej2-react-grids": "^26.1.41"

Please assist. I am feeling I need to change the server API response and also figure out how to send requests to server when the pages are switched by pressing page number buttons. I checked documentation and still I can't figure out what is expected from the server to return. Note: The only way I can get pagination to work is when I retrieve all the data at once however I may have a huge number of entries and I do not want to load them at once.