Search results

Remote Data in React Grid component

28 Nov 2022 / 6 minutes to read

To bind remote data to grid component, assign service data as an instance of DataManager to the dataSource property. To interact with remote data source, provide the endpoint url.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = new DataManager({
            url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/', s
        });
    }
    render() {
        return <GridComponent dataSource={this.data} height={315}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
               </GridComponent>;
    }
}
Copied to clipboard
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';

export default class App extends React.Component<{}, {}>{
    public data = new DataManager({
                      url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/'s
                    });
    public render() {
        return <GridComponent dataSource={this.data} height={315}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
               </GridComponent>
    }
}

By default DataManager uses ODataAdaptor for remote data-binding.

OData adaptor - Binding OData service

OData is standardized protocol for creating and consuming data. You can retrieve data from OData service using DataManager. You can refer to the following code example of remote Data binding using OData service.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = new DataManager({
            adaptor: new ODataAdaptor,
            url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/'
        });
    }
    render() {
        return <GridComponent dataSource={this.data} height={315}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
               </GridComponent>;
    }
}
Copied to clipboard
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';

export default class App extends React.Component<{}, {}>{
    public data = new DataManager({
                    adaptor: new ODataAdaptor,
                    url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/'
                });
    public render() {
        return <GridComponent dataSource={this.data} height={315}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
               </GridComponent>
    }
}

OData v4 adaptor - Binding OData v4 service

The ODataV4 is an improved version of OData protocols, and the DataManager can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the odata documentation. To bind OData v4 service, use the ODataV4Adaptor.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = new DataManager({
            adaptor: new ODataV4Adaptor,
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/?$top=7'
        });
    }
    render() {
        return <GridComponent dataSource={this.data}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
               </GridComponent>;
    }
}
Copied to clipboard
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';

export default class App extends React.Component<{}, {}>{
    public data = new DataManager({
                    adaptor: new ODataV4Adaptor,
                    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/?$top=7'
                });
    public render() {
        return <GridComponent dataSource={this.data}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
               </GridComponent>
    }
}

Web API adaptor

You can use WebApiAdaptor to bind grid with Web API created using OData endpoint.

Copied to clipboard
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';

export default class App extends React.Component<{}, {}>{
    public data = new DataManager({
                    adaptor: new WebApiAdaptor,
                    url: '/api/OrderApi'
                });
    public render() {
        return <GridComponent dataSource={this.data}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
               </GridComponent>
    }
};

The response object should contain properties Items and Count whose values are collection of entities and total count of the entities respectively.

The sample response object should look like below.

Copied to clipboard
{
    Items: [{..}, {..}, {..}, ...],
    Count: 830
}

Remote save adaptor

You may need to perform all Grid Actions in client-side except the CRUD operations, that should be interacted with server-side to persist data. It can be achieved in Grid by using RemoteSaveAdaptor.

Datasource must be set to json property and set RemoteSaveAdaptor to the adaptor property. CRUD operations can be mapped to server-side using updateUrl, insertUrl, removeUrl, batchUrl, crudUrl properties.

You can use the following code example to use RemoteSaveAdaptor in Grid.

Copied to clipboard
import { DataManager, RemoteSaveAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, Edit,  EditSettingsModel } from '@syncfusion/ej2-react-grids';
import { GridComponent, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

export default class App extends React.Component<{}, {}>{
    public dataSource = new DataManager({
                        adaptor: new RemoteSaveAdaptor,
                        insertUrl: '/Home/Insert',
                        json: data,
                        removeUrl: '/Home/Delete',
                        updateUrl: '/Home/Update'
                    });
    public toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    public editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };

    public render() {
        return <GridComponent dataSource={this.dataSource} editSettings={this.editSettings} toolbar={this.toolbarOptions}>
                    <ColumnsDirective>
                        <ColumnDirective field='OrderID' headerText='Order ID' isPrimaryKey={true} width='120' textAlign="Right"/>
                        <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                        <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                        <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                    </ColumnsDirective>
                    <Inject services={[Edit, Toolbar]} />
               </GridComponent>
    }
}

The following code example describes the CRUD operations handled at server-side.

Copied to clipboard
    public ActionResult Update(OrdersDetails value)
    {
        ...
        return Json(value);
    }
    public ActionResult Insert(OrdersDetails value)
    {
        ...
        return Json(value);
    }
    public ActionResult Delete(int key)
    {
        ...
        return Json(data);
    }

Custom adaptor

You can create your own adaptor by extending the built-in adaptors. For the sake of demonstrating custom adaptor approach, we are going to see how to add serial number for the records by overriding the built-in response processing using processResponse method of the ODataAdaptor.

Source
Preview
App.jsx
SerialNoAdaptor.jsx
App.tsx
SerialNoAdaptor.tsx
Copied to clipboard
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { SerialNoAdaptor } from './SerialNoAdaptor';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = new DataManager({
            adaptor: new SerialNoAdaptor,
            url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/'
        });
    }
    render() {
        return <GridComponent dataSource={this.data} height={315}>
                <ColumnsDirective>
                    <ColumnDirective field='Sno' headerText='SNO' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
               </GridComponent>;
    }
}
;
Copied to clipboard
import { setValue } from '@syncfusion/ej2-base';
import { ODataAdaptor } from '@syncfusion/ej2-data';
export class SerialNoAdaptor extends ODataAdaptor {
    processResponse() {
        let i = 0;
        /* calling base class processResponse function */
        const original = super.processResponse.apply(this, arguments);
        /* Adding serial number */
        original.result.forEach((item) => setValue('Sno', ++i, item));
        return { result: original.result, count: original.count };
    }
}
Copied to clipboard
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { SerialNoAdaptor } from './SerialNoAdaptor';

export default class App extends React.Component<{}, {}>{
    public data = new DataManager({
                    adaptor: new SerialNoAdaptor,
                    url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/'
                });
    public render() {
        return <GridComponent dataSource={this.data} height={315}>
                <ColumnsDirective>
                    <ColumnDirective field='Sno' headerText='SNO' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
               </GridComponent>
    }
};
Copied to clipboard
import { setValue } from '@syncfusion/ej2-base';
import { ODataAdaptor } from '@syncfusion/ej2-data';

export class SerialNoAdaptor extends ODataAdaptor {
    public processResponse() {
        let i = 0;
        /* calling base class processResponse function */
        const original = super.processResponse.apply(this, arguments);
        /* Adding serial number */
        original.result.forEach((item: any) => setValue('Sno', ++i, item));
        return { result: original.result, count: original.count };
    }
}

Offline mode

On remote data binding, all grid actions such as paging, sorting, editing, grouping, filtering, etc, will be processed on server-side. To avoid post back for every action, set the grid to load all data on initialization and make the actions process in client-side. To enable this behavior, use the offline property of DataManager.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent, Group } from '@syncfusion/ej2-react-grids';
import { Inject, Page, Sort } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = new DataManager({
            adaptor: new ODataAdaptor,
            offline: true,
            url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/'
        });
        this.page = { pageSize: 7 };
    }
    render() {
        return <GridComponent dataSource={this.data} allowPaging={true} allowGrouping={true} allowSorting={true} pageSettings={this.page}>
                <Inject services={[Page, Group, Sort]}/>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
               </GridComponent>;
    }
}
Copied to clipboard
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent, Group } from '@syncfusion/ej2-react-grids';
import { Inject, Page, PageSettingsModel, Sort } from '@syncfusion/ej2-react-grids';
import * as React from 'react';

export default class App extends React.Component<{}, {}>{
    public data = new DataManager({
                    adaptor: new ODataAdaptor,
                    offline: true,
                    url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/'
                });
    public page: PageSettingsModel = {pageSize:7};
    public render() {
        return <GridComponent dataSource={this.data} allowPaging={true} allowGrouping={true} allowSorting={true} pageSettings={this.page}>
                <Inject services={[Page, Group, Sort]}/>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
               </GridComponent>
    }
}