HelpBot Assistant

How can I help you?

Data Binding in React DataManager

21 Feb 202615 minutes to read

The Syncfusion® React DataManager enables efficient data management in React applications. It supports both RESTful JSON data services binding and local JavaScript object array binding, providing flexibility to handle and manipulate data.

Data binding is the process of connecting Syncfusion React components with data sources, allowing the UI to reflect changes in the data automatically. DataManager simplifies this process by providing seamless integration with React components, enabling efficient data binding without unnecessary code.

Local data binding

Local data binding allows to bind DataManager directly to an array of JavaScript objects stored within the application. This approach is simple and efficient for small datasets or static data that does not need to be fetched from a server.

DataManager initialization enables binding local data by assigning the array of JavaScript objects to the json property or passing them to the constructor during instantiation. Once initialized, the array of JavaScript objects becomes the datasource for DataManager, enabling seamless querying and data manipulation. Follow these steps to bind local data using Syncfusion® DataManager:

  1. Define a local array of objects.
  2. Initialize DataManager with the json property set to that array.
  3. Use the executeLocal method of DataManager to run queries and perform data operations directly on local datasets.

The following example demonstrates how to bind JSON data using the executeLocal method of DataManager.

import { DataManager, Query } from '@syncfusion/ej2-data';
import * as React from 'react';
import { data } from './datasource';
import { Row } from './rowTemplate';
export default class App extends React.Component {
    result = new DataManager(data).executeLocal(new Query().take(8));
    items = this.result.map((row, index) => (
        <Row key={index} {...row} />
    ));
    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>{this.items}</tbody>
           </table>
        );
    }
}
import { DataManager, Query } from '@syncfusion/ej2-data';
import * as React from 'react';
import { data } from './datasource';
import { Row } from './rowTemplate';

export default class App extends React.Component<{}, {}> {
    
    public result: Object[] = new DataManager(data).executeLocal(new Query().take(8));
    public items: React.ReactNode[] = this.result.map((row: object, index: number) => (
        <Row key={index} {...row} />
    ));

    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>{this.items}</tbody>
            </table>
        );
    }
}
export interface IOrders {
    OrderID: number; 
    EmployeeID: number; 
    CustomerID: string; 
    Order_Details: object[]; 
}
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>
        );
    }
}
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>
        )
    }
}

Remote data binding

Remote data binding is particularly useful in scenarios where large datasets need to be fetched from a server, real-time data updates are required, or data needs to be accessed from an external API or database.

Follow these steps to bind remote data using Syncfusion® DataManager:

  1. Start by creating an instance of DataManager and assign the service endpoint URL to the url property.

  2. Use the executeQuery method to send a query to the server and fetch data in JSON format.

  3. After calling executeQuery, the DataManager waits for the server response, converts it into a JSON format, and returns the data to the UI.

The following example demonstrates how to bind JSON data using the executeQuery method of DataManager.

import { getValue } from '@syncfusion/ej2-base';
import { DataManager, Query,ODataV4Adaptor  } 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().take(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>
        );
    }
}
import { getValue } from '@syncfusion/ej2-base';
import { DataManager, Query, ReturnOption,ODataV4Adaptor } 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().take(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>
        )
    }

}
export interface IOrders {
    OrderID: number; 
    EmployeeID: number; 
    CustomerID: string; 
    Order_Details: object[]; 
}
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>
        );
    }
}
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>
        )
    }
}

  • The queried data will not be cached locally unless offline mode is enabled.
  • DataManager is directly bound to Syncfusion components such as the Grid through the dataSource property rather than using executeQuery. Refer to the Grid data‑binding documentation.

See also