On remote data binding,
every time invoking executeQuery will send request to the server and the query will be
processed on server-side.
To avoid post back to server on calling executeQuery
to load all the data on initialization time and make the query processing in client-side.
To enable this behavior, you can use offline property of
DataManager
.
import { getValue } from '@syncfusion/ej2-base';
import { DataManager, ODataAdaptor, 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: [] };
const dm = new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor, offline: true }, new Query().take(8));
dm.ready.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 * 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 { getValue } from '@syncfusion/ej2-base';
import { DataManager, ODataAdaptor, Predicate, 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: [] };
const dm: DataManager = new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor, offline: true }, new Query().take(8));
dm.ready.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>)
}
}
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>)
}
}
export interface IOrders {
OrderID: number;
EmployeeID: number;
CustomerID: string;
Order_Details: object[];
}
The loaded data will be cached in the json property of
DataManager
.
You can use the addParams
method of Query
class, to add custom parameter to the data request.
import { getValue } from '@syncfusion/ej2-base';
import { DataManager, ODataAdaptor, 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, adaptor: new ODataAdaptor })
.executeQuery(new Query().addParams('$top', '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 * 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 { getValue } from '@syncfusion/ej2-base';
import { DataManager, ODataAdaptor, 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, adaptor: new ODataAdaptor })
.executeQuery(new Query().addParams('$top', '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>)
}
}
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>)
}
}
export interface IOrders {
OrderID: number;
EmployeeID: number;
CustomerID: string;
Order_Details: object[];
}
You can add custom headers to the request made by DataManager
using the headers property.
import { DataManager, ODataAdaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
const SERVICE_URI: string = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';
new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor, headers:[{ 'syncfusion': 'true' }] })
.executeQuery(new Query())
.then((e: ReturnOption) => {
// get result from e.result
});
Adding custom headers while making cross domain request will initiate preflight request.