React

Search results

Querying

In this section, you will see in detail about how to build query using Query class and consume the data source.

Specifying resource name using `from`

The from method is used to specify the resource name or table name from where the data should be retrieved.

Source

Preview

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ReturnOption, ODataAdaptor } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

const SERVICE_URI: string =  'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/';

class DataTable extends React.Component<{}, {}> {
     constructor(props: Object) {
        super(props);
        this.state = { items: [] };
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor })
        .executeQuery(new Query().from('Orders').take(8))
        .then((e: ReturnOption) => {
            this.setState({
                items: (e.result as Object[]).map((data: Object) => <Row item={data}></Row>)
            });
        });
     }

    public render() {
        return (<table id='datatable' class='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                <tbody>{this.state.items}</tbody>
            </table>)
    }
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Projection using `select`

The select method is used to select particular fields or columns from the data source.

Source

Preview

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ReturnOption, ODataAdaptor } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

const SERVICE_URI: string =  'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

class DataTable extends React.Component<{}, {}> {
     constructor(props: Object) {
        super(props);
        this.state = { items: [] };
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor })
        .executeQuery(new Query().select(['OrderID', 'CustomerID', 'EmployeeID']).take(8))
        .then((e: ReturnOption) => {
            this.setState({
                items: (e.result as Object[]).map((data: Object) => <Row item={data}></Row>)
            });
        });
     }

    public render() {
        return (<table id='datatable' class='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                <tbody>{this.state.items}</tbody>
            </table>)
    }
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

You can use the expand method to eagerly load navigation properties. The navigation properties values are accessed using appropriate field names separated by dot(.) sign.

Source

Preview

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ReturnOption, ODataAdaptor } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Employee: { FirstName: string }; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.Employee.FirstName}</td>
            </tr>)
}

const SERVICE_URI: string = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

class DataTable extends React.Component<{}, {}> {
     constructor(props: Object) {
        super(props);
        this.state = { items: [] };
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor })
        .executeQuery(new Query().expand('Employee').select(['OrderID', 'CustomerID', 'Employee.FirstName']).take(8))
        .then((e: ReturnOption) => {
            this.setState({
                items: (e.result as Object[]).map((data: Object) => <Row item={data}></Row>)
            });
        });
     }

    public render() {
        return (<table id='datatable' class='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee Name</th></tr>
                </thead>
                <tbody>{this.state.items}</tbody>
            </table>)
    }
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Sorting

You can use the sortBy method to perform sort operation in the data source. Default sorting order is ascending. To change the sort order, either you can specify the second argument of sortBy as descending or use the sortByDesc method.

Source

Preview

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ReturnOption, ODataAdaptor } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

const SERVICE_URI: string =  'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

class DataTable extends React.Component<{}, {}> {
     constructor(props: Object) {
        super(props);
        this.state = { items: [] };
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor })
        .executeQuery(new Query().sortBy('CustomerID', 'descending').take(8))
        .then((e: ReturnOption) => {
            this.setState({
                items: (e.result as Object[]).map((data: Object) => <Row item={data}></Row>)
            });
        });
     }

    public render() {
        return (<table id='datatable' class='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                <tbody>{this.state.items}</tbody>
            </table>)
    }
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Multi sorting can be performed by simply chaining the multiple sortBy methods.

Filtering

You can use the where method to build filter criteria which allows you to get reduced view of records. The where method can also be chained to form multiple filter criteria.

Source

Preview

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ReturnOption, ODataAdaptor } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

const SERVICE_URI: string =  'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

class DataTable extends React.Component<{}, {}> {
     constructor(props: Object) {
        super(props);
        this.state = { items: [] };
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor })
        .executeQuery(new Query().where('EmployeeID', 'equal', 3).take(8))
        .then((e: ReturnOption) => {
            this.setState({
                items: (e.result as Object[]).map((data: Object) => <Row item={data}></Row>)
            });
        });
     }

    public render() {
        return (<table id='datatable' class='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                <tbody>{this.state.items}</tbody>
            </table>)
    }
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Filter Operators

Filter operators are generally used to specify the filter type. The various filter operators supported by DataManager is listed below.

greaterthan
greaterthanorequal
lessthan
lessthanorequal
equal
notequal
startswith
endswith
contains

These filter operators are used for creating filter query using where method and Predicate class.

Build complex filter criteria using `Predicate`

Sometimes chaining where method is not sufficient to create very complex filter criteria, in such cases we can use Predicate class to create composite filter criteria.

Source

Preview

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ReturnOption, ODataAdaptor, Predicate } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

const SERVICE_URI: string =  'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

class DataTable extends React.Component<{}, {}> {
     constructor(props: Object) {
        super(props);
        this.state = { items: [] };
        let predicate: Predicate = new Predicate('EmployeeID', 'equal', 3);
        predicate = predicate.or('EmployeeID', 'equal', 2);

        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor })
        .executeQuery(new Query().where(predicate).take(8))
        .then((e: ReturnOption) => {
            this.setState({
                items: (e.result as Object[]).map((data: Object) => <Row item={data}></Row>)
            });
        });
     }

    public render() {
        return (<table id='datatable' class='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                <tbody>{this.state.items}</tbody>
            </table>)
    }
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Searching

You can use the search method to create search criteria, it differs from the filter in the way that search criteria will applied to all fields in the data source whereas filter criteria will be applied to a particular field.

Source

Preview

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ReturnOption } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

class DataTable extends React.Component<{}, {}> {
     constructor(props: Object) {
        super(props);
        this.state = { items: [] };
        new DataManager(data)
        .executeQuery(new Query().search('VI', ['CustomerID']))
        .then((e: ReturnOption) => {
            this.setState({
                items: (e.result as Object[]).map((data: Object) => <Row item={data}></Row>)
            });
        });
     }

    public render() {
        return (<table id='datatable' class='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                <tbody>{this.state.items}</tbody>
            </table>)
    }
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

You can search particular fields by passing the field name collection in the second argument of search method.

Grouping

DataManager allow you to group records by category. The group method is used to add group query.

Source

Preview

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ReturnOption, ODataAdaptor, Group } from '@syncfusion/ej2-data';
import { data } from './datasource';

function GroupRow(props: { item: Group }) {
    let item: Group = props.item;
    let ag: { OrderID: string } = { OrderID: item.field + ' - ' + item.key };
    return (<tbody> <Row item={ag}/> { getRows(item.items) }</tbody>)
}

function getRows(data: Object[]) {
 return data.map((data: Object) => <Row item={data}></Row>);
}
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

const SERVICE_URI: string =  'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

class DataTable extends React.Component<{}, {}> {
     constructor(props: Object) {
        super(props);
        this.state = { items: [] };

        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor })
        .executeQuery(new Query().group('CustomerID').take(8))
        .then((e: ReturnOption) => {
            this.setState({
                items: (e.result as Object[]).map((data: Object) => <GroupRow item={data}></GroupRow>)
            });
        });
     }

    public render() {
        return (<table id='datatable' class='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                {this.state.items}
            </table>)
    }
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Multiple grouping can be done by simply chaining the group method.

Paging

You can query paged data using page method. This allow you to query particular set of records based on the page size and index.

Source

Preview

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ReturnOption, ODataAdaptor } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

const SERVICE_URI: string =  'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

class DataTable extends React.Component<{}, {}> {
     constructor(props: Object) {
        super(props);
        this.state = { items: [] };
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor })
        .executeQuery(new Query().page(2, 8))
        .then((e: ReturnOption) => {
            this.setState({
                items: (e.result as Object[]).map((data: Object) => <Row item={data}></Row>)
            });
        });
     }

    public render() {
        return (<table id='datatable' class='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                <tbody>{this.state.items}</tbody>
            </table>)
    }
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Aggregation

The aggregate method allows you to get aggregated value for a field based on the type.

The built-in aggregate types are,

sum
average
min
max
count
truecount
falsecount

Source

Preview

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ReturnOption, ODataAdaptor } from '@syncfusion/ej2-data';
import { data } from './datasource';
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }
function Row(props: { item: Orders }) {
    let item: Object = props.item;
    return (<tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>)
}

function AggregateRow(props: { item: Object }) {
    let item: Object = props.item;
    return (<tr>
             <td></td>
             <td></td>
             <td>Min: {item.min}</td>
            </tr>)
}

const SERVICE_URI: string =  'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

class DataTable extends React.Component<{}, {}> {
     constructor(props: Object) {
        super(props);
        this.state = { items: [], aggregates: [] };
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor })
        .executeQuery(new Query().take(5).requiresCount().aggregate('min', 'EmployeeID'))
        .then((e: ReturnOption) => {
            let agg: { min: Object } = { min: e.aggregates['EmployeeID - min'] };
            this.setState({
                items: (e.result as Object[]).map((data: Object) => <Row item={data}></Row>),
                aggregates: [<AggregateRow item={agg}></AggregateRow>]
            });
        });
     }

    public render() {
        return (<table id='datatable' class='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                <tbody>{this.state.items}</tbody>
                <tfoot>{this.state.aggregates}</tfoot>
            </table>)
    }
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Hierarchical query

You can use the hierarchy method to build nested query. The hierarchical queries are commonly required when you use foreign key binding.

The foreignKey method is used to specify the key field of the foreign table and the second argument of the hierarchy method accepts a selector function which selects the records from the foreign table.

Source

Preview

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ReturnOption, ODataAdaptor, Predicate } from '@syncfusion/ej2-data';
import { data } from './datasource';

interface Products { ProductID: number; UnitPrice: number; Quantity: number; }
interface Orders { OrderID: number; EmployeeID: number; CustomerID: string; Order_Details: Object[]; }

function ChildRow(props: { item: Products }) {
    let item: Products = props.item;
    return (<tr>
             <td>{item.ProductID}</td>
             <td>{item.UnitPrice}</td>
             <td>{item.Quantity}</td>
            </tr>)
}

function getRows(data: Object[]) {
 return data.map((data: Object) => <ChildRow item={data}></ChildRow>)
}

function Row(props: { item: Orders }) {
    let item: Orders = props.item;
    return (<tbody><tr>
             <td>{item.OrderID}</td>
             <td>{item.CustomerID}</td>
             <td>{item.EmployeeID}</td>
            </tr>
            <tr><td colSpan='3'>
            <table id='datatable' class='e-table'>
                <thead><th>ID</th><th>Price</th><th>Quantity</th></thead>
                <tbody>{ getRows(item.Order_Details)}</tbody>
            </table>
            </td></tr>
            </tbody>)
}

const SERVICE_URI: string =  'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/';

class DataTable extends React.Component<{}, {}> {
     constructor(props: Object) {
        super(props);
        this.state = { items: [] };

        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor })
        .executeQuery(new Query().from('Orders').take(3).hierarchy(
                    new Query()
                        .foreignKey("OrderID")
                        .from("Order_Details")
                        .sortBy("Quantity"),
                    () => [10248, 10249, 10250] // Selective loading of child elements
                )
        )
        .then((e: ReturnOption) => {
            this.setState({
                items: (e.result as Object[]).map((data: Object) => <Row item={data}></Row>)
            });
        });
     }

    public render() {
        return (<table id='datatable' class='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                {this.state.items}
            </table>)
    }
}

ReactDOM.render(<DataTable />, document.getElementById('container'));

Contents

Specifying resource name using
Projection using
Eager loading navigation properties
Sorting
Filtering
Filter Operators
Build complex filter criteria using
Searching
Grouping
Paging
Aggregation
Hierarchical query

Contents

Specifying resource name using
Projection using
Eager loading navigation properties
Sorting
Filtering
Filter Operators
Build complex filter criteria using
Searching
Grouping
Paging
Aggregation
Hierarchical query

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

Querying

Specifying resource name using from

Projection using select

Eager loading navigation properties

Sorting

Filtering

Filter Operators

Build complex filter criteria using Predicate

Searching

Grouping

Paging

Aggregation

Hierarchical query

Specifying resource name using `from`

Projection using `select`

Build complex filter criteria using `Predicate`