Data binding in React Data component
18 Jan 202312 minutes to read
DataManager
supports both RESTful JSON data services binding and local JavaScript object array binding.
Local data binding
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. Now the JavaScript object array can be queried and manipulated.
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>)
}
}
Remote data binding
DataManager
can be bound to remote data source by assigning service end point URL to the url
property. With the provided url, the DataManager
handles all communication with the data server with help of queries.
When querying data, the DataManager
will convert the query object, Query
into server request after calling executeQuery and waits for the server response(JSON
format).
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>)
}
}
The queried data will not be cached locally unless offline mode is enabled.