Syncfusion AI Assistant

How can I help you?

Sending additional parameters to server with React DataManager

21 Feb 20266 minutes to read

In React applications, when working with remote data sources, it’s often necessary to pass additional parameters to the server to customize the data retrieval process. These parameters could include filters, sorting criteria, or any other information required for server-side processing.

The Syncfusion® DataManager provides a convenient method for including custom parameters in data requests, allowing for enhanced server-side processing. By utilizing the addParams method of the query class, helps to seamlessly integrate additional information into the data requests.

In the following example, the top 15 records of the service are displayed in the table using the addParams method of query class.

import React, { useEffect, useState } from 'react';
import { getValue } from '@syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { Row } from './rowTemplate';

const SERVICE_URL = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';

const App = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    new DataManager({
      url: SERVICE_URL,
      adaptor: new ODataV4Adaptor(),
    })
      .executeQuery(new Query().addParams('$top', '8'))
      .then((e) => {
        const rows = e.result.map((row) => (
          <Row key={row.OrderID} {...row} />
        ));
        setItems(rows);
      });
  }, []);

  return (
    <table id="datatable" className="e-table">
      <thead>
        <tr>
          <th>Order ID</th>
          <th>Customer ID</th>
          <th>Employee ID</th>
        </tr>
      </thead>
      <tbody>{getValue('items', { items })}</tbody>
    </table>
  );
};

export default App;
import * as React from 'react';
import { useEffect, useState } from 'react';
import { getValue } from '@syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
import { IOrders } from './orders';
import { Row } from './rowTemplate';

const SERVICE_URL: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';

const App: React.FC = () => {
  const [items, setItems] = useState<JSX.Element[]>([]);

  useEffect(() => {
    new DataManager({
      url: SERVICE_URL,
      adaptor: new ODataV4Adaptor(),
    })
    .executeQuery(new Query().addParams('$top', '8'))
    .then((e: ReturnOption) => {
      const rows = (e.result as IOrders[]).map((row: IOrders) => (
      <Row key={row.OrderID} {...row} />
      ));
      setItems(rows);
    });
  }, []);

  return (
    <table id="datatable" className="e-table">
      <thead>
        <tr>
          <th>Order ID</th>
          <th>Customer ID</th>
          <th>Employee ID</th>
        </tr>
      </thead>
      <tbody>{getValue('items', { items })}</tbody>
    </table>
  );
};

export default App;
export interface IOrders {
    OrderID: number; 
    EmployeeID: number; 
    CustomerID: string; 
    Order_Details: object[]; 
}
import React from 'react';

export const Row = (props) => {
  return (
    <tr>
      <td>{props.OrderID}</td>
      <td>{props.CustomerID}</td>
      <td>{props.EmployeeID}</td>
    </tr>
  );
};
import * as React from 'react';
import { IOrders } from './orders';

export const Row: React.FC<IOrders> = (props) => {
  return (
    <tr>
      <td>{props.OrderID}</td>
      <td>{props.CustomerID}</td>
      <td>{props.EmployeeID}</td>
    </tr>
  );
};