Sending additional parameters to server with React DataManager

21 Feb 20268 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.

app.jsx

import { getValue } from '@syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import * as React from 'react';
import { Row } from './rowTemplate';
const SERVICE_URI = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { items: [] };
    }
    componentDidMount() { 
        new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor() })
            .executeQuery(new Query().addParams('$top', '8'))
            .then((e) => {
            const res = e.result.map((row) => <Row key={row.OrderID} {...row} />);
            this.setState({
                items: res,
            });
        });
    }
    render() {
        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', this.state)}</tbody>
            </table>
        );
    }
}

app.tsx

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

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

export default class App extends React.Component<{}, {}>{
    constructor(props: object) {
        super(props);
        this.state = { items: [] };

    }
    componentDidMount() { 
        new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor() })
        .executeQuery(new Query().addParams('$top', '8'))
        .then((e: ReturnOption) => {
            const res = (e.result as IOrders[]).map((row: IOrders, index: number) => (
                <Row key={row.OrderID} {...row} />
                ));
                this.setState({
                items: res
                });
        });
     }

    public render() {
        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', this.state) }</tbody>
            </table>
        )
    }

}

orders.tsx

export interface IOrders {
    OrderID: number; 
    EmployeeID: number; 
    CustomerID: string; 
    Order_Details: object[]; 
}

rowtemplate.jsx

import * as React from 'react';
export class Row extends React.Component {
    render() {
        const item = this.props;
        return (
            <tr>
                <td>{item.OrderID}</td>
                <td>{item.CustomerID}</td>
                <td>{item.EmployeeID}</td>
            </tr>
        );
    }
}

rowtemplate.tsx

import * as React from 'react';
import { IOrders } from './orders';

export class Row extends React.Component<{}, {}>{
    public render() {
        const item: IOrders = this.props as IOrders; 
        return (
            <tr>
                <td>{item.OrderID}</td>
                <td>{item.CustomerID}</td>
                <td>{item.EmployeeID}</td>
            </tr>
        )
    }
}