Data Binding in React Query Builder UI

4 Sep 202624 minutes to read

The React Query Builder UI uses DataManager to support both local JavaScript arrays and remote RESTful JSON services. Bind data using the dataSource property with either a DataManager instance or a JavaScript object array. Two binding methods are available:

Local data
Remote data

Local data

To bind local data to the React Query Builder UI, assign a JavaScript object array to the dataSource property. You can also provide local data as a DataManager instance.

app.jsx
app.tsx
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from './datasource';
function App() {
    let columnData = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number' },
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules = {
        'condition': 'and',
        'rules': [{
                'field': 'EmployeeID',
                'label': 'EmployeeID',
                'operator': 'equal',
                'type': 'number',
                'value': 1
            },
            {
                'field': 'Title',
                'label': 'Title',
                'operator': 'equal',
                'type': 'string',
                'value': 'Sales Manager'
            }]
    };
    return (<QueryBuilderComponent width='100%' dataSource={employeeData} columns={columnData} rule={importRules}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));
import { ColumnsModel, QueryBuilderComponent, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from './datasource';

function App() {

    let columnData: ColumnsModel[] = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number'},
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'and',
        'rules': [{
            'field': 'EmployeeID',
            'label': 'EmployeeID',
            'operator': 'equal',
            'type': 'number',
            'value': 1
        },
        {
            'field': 'Title',
            'label': 'Title',
            'operator': 'equal',
            'type': 'string',
            'value': 'Sales Manager'
        }]
    };

    return (
            <QueryBuilderComponent width='100%' dataSource={employeeData} columns={columnData} rule={importRules} />
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

By default, DataManager uses JsonAdaptor for local data binding.

Remote data

To bind remote data to the React Query Builder UI, assign service data as a DataManager instance to the dataSource property, specifying the service endpoint URL.

app.jsx
app.tsx
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
function App() {
    let data = new DataManager({
        url: 'https://services.odata.org/v4/Northwind/Northwind.svc/Employees/',
        adaptor: new ODataV4Adaptor(),
    });
    let columnData = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number' },
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules = {
        'condition': 'and',
        'rules': [{
                'label': 'EmployeeID',
                'field': 'EmployeeID',
                'type': 'number',
                'operator': 'equal',
                'value': 1
            },
            {
                'label': 'Title',
                'field': 'Title',
                'type': 'string',
                'operator': 'equal',
                'value': 'Sales Manager'
            }]
    };
    return (<QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules}></QueryBuilderComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent, ColumnsModel, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

function App() {
    let data = new DataManager({
        url: 'https://services.odata.org/v4/Northwind/Northwind.svc/Employees/',
        adaptor: new ODataV4Adaptor()
    });

    let columnData: ColumnsModel[] = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number'},
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'and',
        'rules': [{
            'label': 'EmployeeID',
            'field': 'EmployeeID',
            'type': 'number',
            'operator': 'equal',
            'value': 1
        },
        {
            'label': 'Title',
            'field': 'Title',
            'type': 'string',
            'operator': 'equal',
            'value': 'Sales Manager'
        }]
    };

    return (
            <QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules} ></QueryBuilderComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

By default, DataManager uses ODataV4Adaptor for remote data binding. To bind to ODataV3 services, use the ODataAdaptor, and to bind to a Web API, use WebApiAdaptor.

Binding with OData services

OData is a standardized protocol for creating and consuming data APIs. Retrieve data from OData services using DataManager. Refer to the following example for remote data binding with OData:

app.jsx
app.tsx
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
function App() {
    let data = new DataManager({
        url: 'https://services.syncfusion.com/react/production/api/orders/',
        adaptor: new ODataAdaptor,
        crossDomain: true
    });
    let columnData = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number' },
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules = {
        'condition': 'and',
        'rules': [{
                'field': 'EmployeeID',
                'label': 'EmployeeID',
                'operator': 'equal',
                'type': 'number',
                'value': 1
            },
            {
                'field': 'Title',
                'label': 'Title',
                'operator': 'equal',
                'type': 'string',
                'value': 'Sales Manager'
            }]
    };
    return (<QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules}></QueryBuilderComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent, ColumnsModel, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';

function App() {
    let data = new DataManager({
        url: 'https://services.syncfusion.com/react/production/api/orders/',
        adaptor: new ODataAdaptor,
        crossDomain: true
    });

    let columnData: ColumnsModel[] = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number'},
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'and',
        'rules': [{
            'field': 'EmployeeID',
            'label': 'EmployeeID',
            'operator': 'equal',
            'type': 'number',
            'value': 1
        },
        {
            'field': 'Title',
            'label': 'Title',
            'operator': 'equal',
            'type': 'string',
            'value': 'Sales Manager'
        }]
    };

    return (
            <QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules} ></QueryBuilderComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

Binding with OData v4 services

OData v4 is an improved version of the OData protocol. DataManager supports OData v4 service consumption. For more details, refer to the OData v4 specification. To bind OData v4 services, use ODataV4Adaptor.

app.jsx
app.tsx
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
function App() {
    let data = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
        adaptor: new ODataV4Adaptor
    });
    let columnData = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number' },
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules = {
        'condition': 'and',
        'rules': [{
                'label': 'EmployeeID',
                'field': 'EmployeeID',
                'type': 'number',
                'operator': 'equal',
                'value': 1
            },
            {
                'label': 'Title',
                'field': 'Title',
                'type': 'string',
                'operator': 'equal',
                'value': 'Sales Manager'
            }]
    };
    return (<QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules}></QueryBuilderComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent, ColumnsModel, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

function App() {
    let data = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
        adaptor: new ODataV4Adaptor
    });

    let columnData: ColumnsModel[] = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number'},
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'and',
        'rules': [{
            'label': 'EmployeeID',
            'field': 'EmployeeID',
            'type': 'number',
            'operator': 'equal',
            'value': 1
        },
        {
            'label': 'Title',
            'field': 'Title',
            'type': 'string',
            'operator': 'equal',
            'value': 'Sales Manager'
        }]
    };

    return (
            <QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules} ></QueryBuilderComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

Binding with Web API

You can use WebApiAdaptor to bind the React Query Builder UI to a Web API created using an OData endpoint. The endpoint must expose data in a format compatible with OData and return responses in the standard { result: [], count: number } shape.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent, ColumnsModel, RuleModel } from '@syncfusion/ej2-react-querybuilder';

function App() {
    let data = new DataManager({
        url: '/api/OrderAPI',
        adaptor: new WebApiAdaptor
    });

    let columnData: ColumnsModel[] = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number'},
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'and',
        'rules': [{
            'label': 'EmployeeID',
            'field': 'EmployeeID',
            'type': 'number',
            'operator': 'equal',
            'value': 1
        },
        {
            'label': 'Title',
            'field': 'Title',
            'type': 'string',
            'operator': 'equal',
            'value': 'Sales Manager'
        }]
    };

    return (
            <QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules} ></QueryBuilderComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
function App() {
    let data = new DataManager({
        url: '/api/OrderAPI',
        adaptor: new WebApiAdaptor
    });
    let columnData = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number' },
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules = {
        'condition': 'and',
        'rules': [{
                'label': 'EmployeeID',
                'field': 'EmployeeID',
                'type': 'number',
                'operator': 'equal',
                'value': 1
            },
            {
                'label': 'Title',
                'field': 'Title',
                'type': 'string',
                'operator': 'equal',
                'value': 'Sales Manager'
            }]
    };
    return (<QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules}></QueryBuilderComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));

Data Manager

You can use the created conditions in DataManager through the getPredicate method, which returns a Predicate instance consumable by DataManager queries. The getValidRules method returns the currently valid rule set (skipping any incomplete or invalid rules) and is used in the following example to retrieve the queried data.

app.jsx
app.tsx
import { DataManager, Query } from '@syncfusion/ej2-data';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import { useState } from "react";
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from './datasource';
function App() {
    let qryBldrObj;
    let columnData = [
        { field: 'TaskID', label: 'Task ID', type: 'number' },
        { field: 'Name', label: 'Name', type: 'string' },
        { field: 'Category', label: 'Category', type: 'string' },
        { field: 'SerialNo', label: 'Serial No', type: 'string' },
        { field: 'InvoiceNo', label: 'Invoice No', type: 'string' },
        { field: 'Status', label: 'Status', type: 'string' }
    ];
    let importRules = {
        'condition': 'or',
        'rules': [{
                'field': 'TaskID',
                'label': 'Task ID',
                'operator': 'equal',
                'type': 'number',
                'value': 1
            }]
    };
    const [state, setState] = useState({
        result: [],
        style: { display: 'none' }
    });
    function onClick() {
        const validRule = qryBldrObj.getValidRules(qryBldrObj.rule);
        const dataManagerQuery = new Query().select(['TaskID', 'Category', 'Status']).where(qryBldrObj.getPredicate(validRule)).take(8);
        setState({ result: new DataManager(hardwareData).executeLocal(dataManagerQuery), style: { display: 'block' } });
    }
    return (<div>
            <QueryBuilderComponent width='100%' dataSource={hardwareData} columns={columnData} rule={importRules} ref={(scope) => { qryBldrObj = scope; }}/>
            <div className="e-qb-button">
                <ButtonComponent id="getdata" cssClass='e-primary' content='get data' onClick={onClick}/>
            </div>
            <table id="datatable" className="e-table" style={state.style}>
                <thead>
                    <tr><th>TaskID</th><th>Category</th><th>Status</th></tr>
                </thead>
                <tbody>{state.result.map(function func(item, key) {
            return (<tr key={key}>
                            <td>{item.TaskID}</td>
                            <td>{item.Category}</td>
                            <td>{item.Status}</td>
                        </tr>);
        })}</tbody>
            </table>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));
import { DataManager, Query } from '@syncfusion/ej2-data';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnsModel, QueryBuilderComponent, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import { useState } from "react";
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from './datasource';

function App() {
    let qryBldrObj: QueryBuilderComponent;
    let columnData: ColumnsModel[] = [
        { field: 'TaskID', label: 'Task ID', type: 'number' },
        { field: 'Name', label: 'Name', type: 'string' },
        { field: 'Category', label: 'Category', type: 'string' },
        { field: 'SerialNo', label: 'Serial No', type: 'string' },
        { field: 'InvoiceNo', label: 'Invoice No', type: 'string' },
        { field: 'Status', label: 'Status', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'or',
        'rules': [{
            'field': 'TaskID',
            'label': 'Task ID',
            'operator': 'equal',
            'type': 'number',
            'value': 1
        }]
    };
    const [state, setState] = useState({
        result: [],
        style: {display: 'none'}
    });

    function onClick(): void {
        const validRule = qryBldrObj.getValidRules(qryBldrObj.rule);
        const dataManagerQuery = new Query().select(['TaskID', 'Category', 'Status']).where(qryBldrObj.getPredicate(validRule)).take(8);
        setState({result: new DataManager(hardwareData).executeLocal(dataManagerQuery), style: {display: 'block'}});
    }

    return (
        <div>
            <QueryBuilderComponent width='100%' dataSource={hardwareData} columns={columnData}  rule={importRules}
                ref={(scope) => { qryBldrObj = scope as QueryBuilderComponent; }}/>
            <div className="e-qb-button">
                <ButtonComponent id="getdata" cssClass='e-primary' content='get data' onClick = {onClick} />
            </div>
            <table id="datatable" className="e-table" style={state.style}>
                <thead>
                    <tr><th>TaskID</th><th>Category</th><th>Status</th></tr>
                </thead>
                <tbody>{state.result.map(function func(item, key) {
                    return (
                        <tr key = {key}>
                            <td>{item.TaskID}</td>
                            <td>{item.Category}</td>
                            <td>{item.Status}</td>
                        </tr>
                    )
                })}</tbody>
            </table>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

Complex Data Binding

Complex Data Binding allows you to create sub-fields for columns. To implement complex data binding, you can either bind nested columns or provide a complex data source along with a separator property on the Query Builder.

In the following sample, complex data was bound in nested columns.

app.jsx
app.tsx
import { QueryBuilderComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-querybuilder';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    let qryBldrObj;
    let importRules = {
        condition: 'and',
        rules: [{
                label: 'ID',
                field: 'Employee.ID',
                type: 'string',
                operator: 'equal',
                value: 0
            },
            {
                label: 'Last Name',
                field: 'Name.LastName',
                type: 'string',
                operator: 'contains',
                value: 'malan'
            },
            {
                condition: 'or',
                rules: [{
                        label: 'City',
                        field: 'Country.State.City',
                        operator: 'startswith',
                        type: 'string',
                        value: 'U'
                    },
                    {
                        label: 'Region',
                        field: 'Country.Region',
                        operator: 'endswith',
                        type: 'string',
                        value: 'c'
                    },
                    {
                        label: 'Name',
                        field: 'Country.Name',
                        operator: 'isnotempty'
                    }]
            }],
    };
    let columns1 = [
        { field: 'ID', label: 'ID', type: 'number' },
        { field: 'DOB', label: 'Date of birth', type: 'date' },
        { field: 'HireDate', label: 'Hire Date', type: 'date' },
        { field: 'Salary', label: 'Salary', type: 'number' },
        { field: 'Age', label: 'Age', type: 'number' },
        { field: 'Title', label: 'Title', type: 'string' }
    ];
    let columns2 = [
        { field: 'FirstName', label: 'First Name', type: 'string' },
        { field: 'LastName', label: 'Last Name', type: 'string' }
    ];
    let columns3 = [
        { field: 'State', label: 'State', columns: [
                { field: 'City', label: 'City', type: 'string' },
                { field: 'Zipcode', label: 'Zip Code', type: 'number' }
            ] },
        { field: 'Region', label: 'Region', type: 'string' },
        { field: 'Name', label: 'Name', type: 'string' }
    ];
    function onReset() {
        qryBldrObj.reset();
    }
    function onSetsqlRules() {
        qryBldrObj.setRulesFromSql("Employee.ID = 0 AND Name.LastName LIKE ('%malan%') AND (Country.State.City LIKE ('U%') AND Country.Region LIKE ('%c') AND Country.Name IS NOT EMPTY)");
    }
    function onSetrules() {
        qryBldrObj.setRules(importRules);
    }
    return (<div>
            <div>
                <table>
                    <tr>
                        <td>  <ButtonComponent id="reset" className="e-control e-danger e-btn e-small" onClick={onReset}>Reset</ButtonComponent> </td>
                        <td>  <ButtonComponent id="rule" className="e-control e-success e-btn e-small" onClick={onSetsqlRules}>SetSqlRules</ButtonComponent></td>
                        <td> <ButtonComponent id="sql" className="e-control e-success e-btn e-small" onClick={onSetrules}>SetRules</ButtonComponent>  </td>
                    </tr>
                </table>
            </div>
            <QueryBuilderComponent width='100%' rule={importRules} id='querybuilder' separator="." enableNotCondition="true" ref={(scope) => { qryBldrObj = scope; }}>
                <ColumnsDirective>
                    <ColumnDirective field="Employee" label="Employee" columns={columns1}/>
                    <ColumnDirective field="Name" label="Name" columns={columns2}/>
                    <ColumnDirective field="Country" label="Country" columns={columns3}/>
                </ColumnsDirective>
            </QueryBuilderComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder-component'));
import { QueryBuilderComponent, ColumnsDirective, ColumnDirective, RuleChangeEventArgs  } from '@syncfusion/ej2-react-querybuilder';
import { RuleModel,  ColumnsModel } from '@syncfusion/ej2-querybuilder';
import { RadioButtonComponent, ButtonComponent, ChangeEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
        let qryBldrObj: QueryBuilderComponent;
        let importRules: RuleModel = {
            condition: 'and',
            rules: [{
                label: 'ID',
                field: 'Employee.ID',
                type: 'string',
                operator: 'equal',
                value: 0
            },
            {
                label: 'Last Name',
                field: 'Name.LastName',
                type: 'string',
                operator: 'contains',
                value: 'malan'
            },
            {
                condition: 'or',
                rules: [{
                    label: 'City',
                    field: 'Country.State.City',
                    operator: 'startswith',
                    type: 'string',
                    value: 'U'
                },
                {
                    label: 'Region',
                    field: 'Country.Region',
                    operator: 'endswith',
                    type: 'string',
                    value: 'c'
                },
                {
                    label: 'Name',
                    field: 'Country.Name',
                    operator: 'isnotempty'
                }]
            }],
        };
        let columns1: ColumnsModel[] = [
            { field: 'ID', label: 'ID', type: 'number'},
            { field: 'DOB', label: 'Date of birth', type: 'date'},
            { field: 'HireDate', label: 'Hire Date', type: 'date'},
            { field: 'Salary', label: 'Salary', type: 'number'},
            { field: 'Age', label: 'Age', type: 'number'},
            { field: 'Title', label: 'Title', type: 'string'}
        ];
        let columns2: ColumnsModel[]= [
            { field: 'FirstName', label: 'First Name', type: 'string'},
            { field: 'LastName', label: 'Last Name', type: 'string'}
        ];
        let columns3: ColumnsModel[]= [
            { field: 'State', label: 'State', columns : [
                { field: 'City', label: 'City', type: 'string'},
                { field: 'Zipcode', label: 'Zip Code', type: 'number'}] },
            { field: 'Region', label: 'Region', type: 'string'},
            { field: 'Name', label: 'Name', type: 'string'}
        ];
        function onReset(): void{
            qryBldrObj.reset();
        }
        function onSetsqlRules(): void{
            qryBldrObj.setRulesFromSql("Employee.ID = 0 AND Name.LastName LIKE ('%malan%') AND (Country.State.City LIKE ('U%') AND Country.Region LIKE ('%c') AND Country.Name IS NOT EMPTY)");
        }
        function onSetrules(): void{
            qryBldrObj.setRules(importRules);
        }
        return (<div>
            <div>
                <table>
                    <tr>
                        <td>  <ButtonComponent id="reset" className="e-control e-danger e-btn e-small" onClick={onReset}>Reset</ButtonComponent> </td>
                        <td>  <ButtonComponent id="rule" className="e-control e-success e-btn e-small" onClick={onSetsqlRules}>SetSqlRules</ButtonComponent></td>
                        <td> <ButtonComponent id="sql" className="e-control e-success e-btn e-small" onClick={onSetrules}>SetRules</ButtonComponent>  </td>
                    </tr>
                </table>
            </div>
            <QueryBuilderComponent width='100%' rule={importRules}  id='querybuilder' separator= "." enableNotCondition ="true" ref={(scope) => { qryBldrObj = scope; }} >
                <ColumnsDirective>
                    <ColumnDirective field="Employee" label="Employee" columns={columns1} />
                    <ColumnDirective field="Name" label="Name" columns={columns2} />
                    <ColumnDirective field="Country" label="Country" columns={columns3} />
                </ColumnsDirective>
            </QueryBuilderComponent>
        </div>);
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder-component'));

Search docs

Ask Syncfusion AI Assistant