Grid Remote DataSource

The Live Grid supports binding to a remote datasource with little coding or configuration.

Demo

Dependencies

In addition to the core and grid packages you will also have to install the datasources package.

npm install igniteui-react-core
npm install igniteui-react-grids
npm install igniteui-react-datasources

In order to use the grid, you need to register the IgrLiveGridModule in your app during load:

import './odatajs-4.0.0';
import { IgrLiveGridModule } from "igniteui-react-grids/ES5/igr-live-grid-module";
import { IgrLiveGrid } from "igniteui-react-grids/ES5/igr-live-grid";
import { ODataVirtualDataSource } from "igniteui-react-datasources/ES5/ODataVirtualDataSource";

IgrLiveGridModule.register();

Usage

Now that the grid module is imported, the next step is the basic configuration of the grid that binds to remote data. Create the virtual datasource. Assign the url where the data will be retrieved from to the baseUri property. Setting the entitySet property will inform which table to retrieve from the virtual datasource.

private virt: ODataVirtualDataSource;
...
const virt = new ODataVirtualDataSource();
virt.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc");
virt.entitySet = ("Orders");
this.virt = virt;

Assign the datasource to the grid.

<IgrLiveGrid 
    width="100%"
    height="100%"
    defaultColumnMinWidth={120}
    dataSource={this.virt}/>