Getting started
18 Jan 202324 minutes to read
Dependencies
Below is the list of minimum dependencies required to use the DataManager.
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-base
|-- es6-promise (Required when window.Promise is not available)
@syncfusion/ej2-data requires the presence of a Promise feature in global environment. In the browser, window.Promise must be available.
Installation and configuration
You can use create-react-app
to setup the applications. To install create-react-app run the following command.
npm install -g create-react-app
- To setup basic React sample use following commands.
create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
npm install
- Install Syncfusion packages using below command.
npm install @syncfusion/ej2-data --save
Connection to a data source
The DataManager can act as gateway for both local and remote data source which will uses the query to interact with the data source.
Binding to JSON data
DataManager
can be bound to local data source by assigning the array of JavaScript objects to the json property or simply passing them to the constructor while instantiating.
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) => (<Row {...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 { IOrders } from './orders';
import { Row } from './rowTemplate';
export default class App extends React.Component<{}, {}>{
public result: object[] = new DataManager(data).executeLocal(new Query().take(8));
public items: object[] = this.result.map((row: IOrders) => (<Row {...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 {};
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>)
}
}
Binding to OData
DataManager
can be bound to remote data source by assigning service end point URL to the url property. Now all DataManager
operations will address the provided service end point.
import { getValue } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import * as React from 'react';
import { Row } from './rowTemplate';
const SERVICE_URI = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { items: [] };
new DataManager({ url: SERVICE_URI }).executeQuery(new Query().take(8))
.then((e) => {
const res = e.result.map((row) => (<Row {...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 } from '@syncfusion/ej2-data';
import * as React from 'react';
import { IOrders } from './orders';
import { Row } from './rowTemplate';
const SERVICE_URI: string = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';
export default class App extends React.Component<{}, {}>{
constructor(props: object) {
super(props);
this.state = { items: [] };
new DataManager({ url: SERVICE_URI }).executeQuery(new Query().take(8))
.then((e: ReturnOption) => {
const res = (e.result as IOrders[]).map((row: IOrders) => (<Row {...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 {};
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>)
}
}
Filter
The data filtering is a trivial operation which will let us to get reduced view of data based on filter criteria. The filter expression can be built easily using where
method of Query
class.
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()
.where('EmployeeID', 'equal', 3));
items = this.result.map((row) => (<Row {...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 { IOrders } from './orders';
import { Row } from './rowTemplate';
export default class App extends React.Component<{}, {}>{
public result: object[] = new DataManager(data).executeLocal(new Query()
.where('EmployeeID', 'equal', 3));
public items: object[] = this.result.map((row: IOrders) => (<Row {...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 {};
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>)
}
}
Sort
The data can be ordered either in ascending or descending using sortBy
method of Query
class.
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()
.sortBy('CustomerID').take(8));
items = this.result.map((row) => (<Row {...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 { IOrders } from './orders';
import { Row } from './rowTemplate';
export default class App extends React.Component<{}, {}>{
public result: object[] = new DataManager(data).executeLocal(new Query()
.sortBy('CustomerID').take(8));
public items: object[] = this.result.map((row: IOrders) => (<Row {...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 {};
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>)
}
}
Page
The page
method of the Query class is used to get range of data based on the page number and the total page size.
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()
.page(1, 8));
items = this.result.map((row) => (<Row {...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 { IOrders } from './orders';
import { Row } from './rowTemplate';
export default class App extends React.Component<{}, {}>{
public result: object[] = new DataManager(data).executeLocal(new Query()
.page(1, 8));
public items: object[] = this.result.map((row: IOrders) => (<Row {...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 {};
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>)
}
}
Component binding
DataManager component can be used with Syncfusion components which supports data binding.
Local data binding
A DataSource can be created in-line with other Syncfusion component configuration settings.
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from "react";
import './App.css';
import { data } from './datasource';
export default class App extends React.Component {
data = new DataManager(data);
render() {
return <GridComponent dataSource={this.data}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
</GridComponent>;
}
}
;
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent} from '@syncfusion/ej2-react-grids';
import * as React from "react";
import './App.css';
import { data } from './datasource';
export default class App extends React.Component<{}, {}>{
public data: DataManager = new DataManager(data);
public render(){
return <GridComponent dataSource={this.data}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
</GridComponent>
}
};
Remote data binding
To bind remote data to Syncfusion component, you can assign a service data as an instance of DataManager
to the dataSource property.
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from "react";
import './App.css';
const SERVICE_URI = 'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/?$top=20';
export default class App extends React.Component {
data = new DataManager({ url: SERVICE_URI });
render() {
return <GridComponent dataSource={this.data}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
</GridComponent>;
}
}
;
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent} from '@syncfusion/ej2-react-grids';
import * as React from "react";
import './App.css';
const SERVICE_URI = 'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/?$top=20';
export default class App extends React.Component<{}, {}>{
public data: DataManager = new DataManager({ url: SERVICE_URI });
public render(){
return <GridComponent dataSource={this.data}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
</GridComponent>
}
};