React

Search results

Importing and Exporting in React QueryBuilder component

Importing allows you to view or edit the predefined conditions which is available in JSON or SQL. You can import the conditions either initial rendering or post rendering.

Initial rendering

To apply conditions initially, you can define the rule. Here, you can import structured JSON object by defining the rule property.

Source

Preview

app.tsx

index.html

datasource.ts

app.jsx

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

class App extends React.Component<{}, {}> {

    public 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' }
    ];

    public importRules: RuleModel = {
        'condition': 'or',
        'rules': [{
            'field': 'Category',
            'label': 'Category',
            'operator': 'equal',
            'type': 'string',
            'value': 'Laptop'
        },
        {
        'condition': 'and',
            'rules': [{
                'field': 'Status',
                'label': 'Status',
                'operator': 'notequal',
                'type': 'string',
                'value': 'Pending'
            },
            {
                'field': 'TaskID',
                'label': 'Task ID',
                'operator': 'equal',
                'type': 'number',
                'value': 5675
            }]
        }]
    };
  
    public render() {
        return (
            <QueryBuilderComponent width='100%' dataSource={hardwareData} columns={this.columnData}  rule={this.importRules}/>
        );
    }
}
ReactDom.render(<App />,document.getElementById('querybuilder'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-querybuilder/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='querybuilder'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

/**
 * QueryBuilder datasource
 */
export let employeeData: Array<{[key: string]: any}> = [
	{
		'Address': '507 - 20th Ave. E.\r\nApt. 2A',
		'City': 'Seattle',
		'Country': 'USA',
		'EmployeeID': 1,
		'FirstName': 'Nancy',
		'HireDate': '22/07/2001',
		'LastName': 'Davolio',
		'PostalCode': '98122',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '908 W. Capital Way',
		'City': 'Tacoma',
		'Country': 'USA',
		'EmployeeID': 2,
		'FirstName': 'Andrew',
		'HireDate': '21/04/2003',
		'LastName': 'Fuller',
		'PostalCode': '98401',
		'Region': 'WA',
		'Title': 'Vice President',
		'TitleOfCourtesy': 'Dr.'
	},
	{
		'Address': '722 Moss Bay Blvd.',
		'City': 'Kirkland',
		'Country': 'USA',
		'EmployeeID': 3,
		'FirstName': 'Janet',
		'HireDate': '22/07/2001',
		'LastName': 'Leverling',
		'PostalCode': '98033',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '4110 Old Redmond Rd.',
		'City': 'Redmond',
		'Country': 'USA',
		'EmployeeID': 4,
		'FirstName': 'Margaret',
		'HireDate': '22/07/2004',
		'LastName': 'Peacock',
		'PostalCode': '98052',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mrs.'
	},
	{
		'Address': '14 Garrett Hill',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 5,
		'FirstName': 'Steven',
		'HireDate': '02/04/2001',
		'LastName': 'Buchanan',
		'PostalCode': 'SW1 8JR',
		'Region': null,
		'Title': 'Sales Manager',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': 'Coventry House\r\nMiner Rd.',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 6,
		'FirstName': 'Michael',
		'HireDate': '22/01/2003',
		'LastName': 'Suyama',
		'PostalCode': 'EC2 7JR',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': 'Edgeham Hollow\r\nWinchester Way',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 7,
		'FirstName': 'Robert',
		'HireDate': '22/07/2001',
		'LastName': 'King',
		'PostalCode': 'RG1 9SP',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': '4726 - 11th Ave. N.E.',
		'City': 'Seattle',
		'Country': 'USA',
		'EmployeeID': 8,
		'FirstName': 'Laura',
		'HireDate': '22/07/2001',
		'LastName': 'Callahan',
		'PostalCode': '98105',
		'Region': 'WA',
		'Title': 'Inside Sales Coordinator',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '7 Houndstooth Rd.',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 9,
		'FirstName': 'Anne',
		'HireDate': '22/07/2001',
		'LastName': 'Dodsworth',
		'PostalCode': 'WG2 7LT',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	}
];
export let expenseData: Array<{[key: string]: any}>  = [
	{
		'Amount': '7',
		'Category': 'Food',
		'Description': 'Boiled peanuts',
		'FormattedDate': '06/01/2017 09:12 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Credit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100001'
	},
	{
		'Amount': '8',
		'Category': 'Food',
		'Description': 'Peanuts in Coke',
		'FormattedDate': '06/04/2017 02:43 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100024'
	},
	{
		'Amount': '11',
		'Category': 'Food',
		'Description': 'Palmetto Cheese, Mint julep',
		'FormattedDate': '06/04/2017 08:35 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100025'
	},
	{
		'Amount': '9',
		'Category': 'Transportation',
		'Description': 'Cars and trucks, used',
		'FormattedDate': '06/04/2017 10:25 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Debit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100026'
	},
	{
		'Amount': '8',
		'Category': 'Transportation',
		'Description': 'Public and other transportation',
		'FormattedDate': '06/04/2017 03:55 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Debit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100027'
	},
	{
		'Amount': '160',
		'Category': 'Shopping',
		'Description': 'Household things & Utilities',
		'FormattedDate': '06/04/2017 10:22 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100028'
	},
	{
		'Amount': '110',
		'Category': 'Extra income',
		'Description': 'Income from Sale',
		'FormattedDate': '11/30/2017 02:42 PM',
		'MonthFull': 'November, 2017',
		'MonthShort': 'Nov',
		'PaymentMode': 'Cash',
		'TransactionType': 'Income',
		'UniqueId': 'T101284'
	}
];
export let hardwareData: Array<{[key: string]: any}>  = [
	{
		'AssignedTo': 'John Doe',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2878',
		'Name': 'Lenovo Yoga',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB27932009',
		'Status': 'Assigned',
		'TaskID': 1,
		'WEO': '05/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Others',
		'DOP': '02/12/2018',
		'InvoiceNo': 'INV-3456',
		'Name': 'Acer Aspire',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB35728290',
		'Status': 'In-repair',
		'TaskID': 2,
		'WEO': '03/01/2023'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2763',
		'Name': 'Apple MacBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB35628728',
		'Status': 'In-repair',
		'TaskID': 3,
		'WEO': '04/03/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '03/09/2018',
		'InvoiceNo': 'INV-2980',
		'Name': 'Lenovo ThinkPad',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56209872',
		'Status': 'Pending',
		'TaskID': 4,
		'WEO': '05/12/2021'
	},
	{
		'AssignedTo': 'David Anto',
		'Category': 'Laptop',
		'DOP': '01/10/2018',
		'InvoiceNo': 'INV-3782',
		'Name': 'Dell Inspiron',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56289036',
		'Status': 'Assigned',
		'TaskID': 5,
		'WEO': '04/01/2021'
	},
	{
		'AssignedTo': 'Mary Saveley',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2712',
		'Name': 'HP Pavilion',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56289305',
		'Status': 'Assigned',
		'TaskID': 6,
		'WEO': '05/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '06/16/2018',
		'InvoiceNo': 'INV-0984',
		'Name': 'Asus ZenBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB25637891',
		'Status': 'Pending',
		'TaskID': 7,
		'WEO': '09/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '02/19/2018',
		'InvoiceNo': 'INV-2561',
		'Name': 'HP EliteBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB27819726',
		'Status': 'Ordered',
		'TaskID': 8,
		'WEO': '05/21/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '02/12/2018',
		'InvoiceNo': 'INV-8970',
		'Name': 'Apple MacBook Air',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB05262880',
		'Status': 'Pending',
		'TaskID': 9,
		'WEO': '03/01/2023'
	},
	{
		'AssignedTo': '',
		'Category': 'Tablet',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-4555',
		'Name': 'Apple iPad Air',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB45262777',
		'Status': 'Pending',
		'TaskID': 10,
		'WEO': '05/01/2021'
	}
];

import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from '../datasource.ts';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.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' }
        ];
        this.importRules = {
            'condition': 'or',
            'rules': [{
                    'field': 'Category',
                    'label': 'Category',
                    'operator': 'equal',
                    'type': 'string',
                    'value': 'Laptop'
                },
                {
                    'condition': 'and',
                    'rules': [{
                            'field': 'Status',
                            'label': 'Status',
                            'operator': 'notequal',
                            'type': 'string',
                            'value': 'Pending'
                        },
                        {
                            'field': 'TaskID',
                            'label': 'Task ID',
                            'operator': 'equal',
                            'type': 'number',
                            'value': 5675
                        }]
                }]
        };
    }
    render() {
        return (<QueryBuilderComponent width='100%' dataSource={hardwareData} columns={this.columnData} rule={this.importRules}/>);
    }
}
ReactDom.render(<App />, document.getElementById('querybuilder'));

Post rendering

Importing from JSON

You can set the conditions from structured JSON object through the setRules method.

Source

Preview

app.tsx

index.html

datasource.ts

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnsModel, QueryBuilderComponent, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from '../datasource.ts';

class App extends React.Component<{}, {}> {
    public qryBldrObj: QueryBuilderComponent;

    public 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' }
    ];

    public importRules: RuleModel = {
        'condition': 'or',
        'rules': [{
            'field': 'Category',
            'label': 'Category',
            'operator': 'equal',
            'type': 'string',
            'value': 'Laptop'
        },
        {
        'condition': 'and',
            'rules': [{
                'field': 'Status',
                'label': 'Status',
                'operator': 'notequal',
                'type': 'string',
                'value': 'Pending'
            },
            {
                'field': 'TaskID',
                'label': 'Task ID',
                'operator': 'equal',
                'type': 'number',
                'value': 5675
            }]
        }]
    };
    constructor(props: any) {
        super(props);
        this.onClick = this.onClick.bind(this);
    }
    public onClick(): void {
        this.qryBldrObj.setRules(this.importRules);
    }
    public render() {
        return (
            <div>
                <QueryBuilderComponent width='100%' dataSource={hardwareData}  ref={(scope) => { this.qryBldrObj = scope as QueryBuilderComponent; }} columns={this.columnData}/>
                <div className="e-qb-button">
                    <ButtonComponent id="importrules" cssClass='e-primary' content='Set Rules' onClick = {this.onClick}/>
                </div>
            </div>
        );
    }
}
ReactDom.render(<App />,document.getElementById('querybuilder'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-querybuilder/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='querybuilder'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

/**
 * QueryBuilder datasource
 */
export let employeeData: Array<{[key: string]: any}> = [
	{
		'Address': '507 - 20th Ave. E.\r\nApt. 2A',
		'City': 'Seattle',
		'Country': 'USA',
		'EmployeeID': 1,
		'FirstName': 'Nancy',
		'HireDate': '22/07/2001',
		'LastName': 'Davolio',
		'PostalCode': '98122',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '908 W. Capital Way',
		'City': 'Tacoma',
		'Country': 'USA',
		'EmployeeID': 2,
		'FirstName': 'Andrew',
		'HireDate': '21/04/2003',
		'LastName': 'Fuller',
		'PostalCode': '98401',
		'Region': 'WA',
		'Title': 'Vice President',
		'TitleOfCourtesy': 'Dr.'
	},
	{
		'Address': '722 Moss Bay Blvd.',
		'City': 'Kirkland',
		'Country': 'USA',
		'EmployeeID': 3,
		'FirstName': 'Janet',
		'HireDate': '22/07/2001',
		'LastName': 'Leverling',
		'PostalCode': '98033',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '4110 Old Redmond Rd.',
		'City': 'Redmond',
		'Country': 'USA',
		'EmployeeID': 4,
		'FirstName': 'Margaret',
		'HireDate': '22/07/2004',
		'LastName': 'Peacock',
		'PostalCode': '98052',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mrs.'
	},
	{
		'Address': '14 Garrett Hill',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 5,
		'FirstName': 'Steven',
		'HireDate': '02/04/2001',
		'LastName': 'Buchanan',
		'PostalCode': 'SW1 8JR',
		'Region': null,
		'Title': 'Sales Manager',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': 'Coventry House\r\nMiner Rd.',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 6,
		'FirstName': 'Michael',
		'HireDate': '22/01/2003',
		'LastName': 'Suyama',
		'PostalCode': 'EC2 7JR',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': 'Edgeham Hollow\r\nWinchester Way',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 7,
		'FirstName': 'Robert',
		'HireDate': '22/07/2001',
		'LastName': 'King',
		'PostalCode': 'RG1 9SP',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': '4726 - 11th Ave. N.E.',
		'City': 'Seattle',
		'Country': 'USA',
		'EmployeeID': 8,
		'FirstName': 'Laura',
		'HireDate': '22/07/2001',
		'LastName': 'Callahan',
		'PostalCode': '98105',
		'Region': 'WA',
		'Title': 'Inside Sales Coordinator',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '7 Houndstooth Rd.',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 9,
		'FirstName': 'Anne',
		'HireDate': '22/07/2001',
		'LastName': 'Dodsworth',
		'PostalCode': 'WG2 7LT',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	}
];
export let expenseData: Array<{[key: string]: any}>  = [
	{
		'Amount': '7',
		'Category': 'Food',
		'Description': 'Boiled peanuts',
		'FormattedDate': '06/01/2017 09:12 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Credit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100001'
	},
	{
		'Amount': '8',
		'Category': 'Food',
		'Description': 'Peanuts in Coke',
		'FormattedDate': '06/04/2017 02:43 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100024'
	},
	{
		'Amount': '11',
		'Category': 'Food',
		'Description': 'Palmetto Cheese, Mint julep',
		'FormattedDate': '06/04/2017 08:35 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100025'
	},
	{
		'Amount': '9',
		'Category': 'Transportation',
		'Description': 'Cars and trucks, used',
		'FormattedDate': '06/04/2017 10:25 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Debit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100026'
	},
	{
		'Amount': '8',
		'Category': 'Transportation',
		'Description': 'Public and other transportation',
		'FormattedDate': '06/04/2017 03:55 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Debit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100027'
	},
	{
		'Amount': '160',
		'Category': 'Shopping',
		'Description': 'Household things & Utilities',
		'FormattedDate': '06/04/2017 10:22 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100028'
	},
	{
		'Amount': '110',
		'Category': 'Extra income',
		'Description': 'Income from Sale',
		'FormattedDate': '11/30/2017 02:42 PM',
		'MonthFull': 'November, 2017',
		'MonthShort': 'Nov',
		'PaymentMode': 'Cash',
		'TransactionType': 'Income',
		'UniqueId': 'T101284'
	}
];
export let hardwareData: Array<{[key: string]: any}>  = [
	{
		'AssignedTo': 'John Doe',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2878',
		'Name': 'Lenovo Yoga',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB27932009',
		'Status': 'Assigned',
		'TaskID': 1,
		'WEO': '05/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Others',
		'DOP': '02/12/2018',
		'InvoiceNo': 'INV-3456',
		'Name': 'Acer Aspire',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB35728290',
		'Status': 'In-repair',
		'TaskID': 2,
		'WEO': '03/01/2023'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2763',
		'Name': 'Apple MacBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB35628728',
		'Status': 'In-repair',
		'TaskID': 3,
		'WEO': '04/03/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '03/09/2018',
		'InvoiceNo': 'INV-2980',
		'Name': 'Lenovo ThinkPad',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56209872',
		'Status': 'Pending',
		'TaskID': 4,
		'WEO': '05/12/2021'
	},
	{
		'AssignedTo': 'David Anto',
		'Category': 'Laptop',
		'DOP': '01/10/2018',
		'InvoiceNo': 'INV-3782',
		'Name': 'Dell Inspiron',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56289036',
		'Status': 'Assigned',
		'TaskID': 5,
		'WEO': '04/01/2021'
	},
	{
		'AssignedTo': 'Mary Saveley',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2712',
		'Name': 'HP Pavilion',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56289305',
		'Status': 'Assigned',
		'TaskID': 6,
		'WEO': '05/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '06/16/2018',
		'InvoiceNo': 'INV-0984',
		'Name': 'Asus ZenBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB25637891',
		'Status': 'Pending',
		'TaskID': 7,
		'WEO': '09/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '02/19/2018',
		'InvoiceNo': 'INV-2561',
		'Name': 'HP EliteBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB27819726',
		'Status': 'Ordered',
		'TaskID': 8,
		'WEO': '05/21/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '02/12/2018',
		'InvoiceNo': 'INV-8970',
		'Name': 'Apple MacBook Air',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB05262880',
		'Status': 'Pending',
		'TaskID': 9,
		'WEO': '03/01/2023'
	},
	{
		'AssignedTo': '',
		'Category': 'Tablet',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-4555',
		'Name': 'Apple iPad Air',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB45262777',
		'Status': 'Pending',
		'TaskID': 10,
		'WEO': '05/01/2021'
	}
];

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from '../datasource.ts';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.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' }
        ];
        this.importRules = {
            'condition': 'or',
            'rules': [{
                    'field': 'Category',
                    'label': 'Category',
                    'operator': 'equal',
                    'type': 'string',
                    'value': 'Laptop'
                },
                {
                    'condition': 'and',
                    'rules': [{
                            'field': 'Status',
                            'label': 'Status',
                            'operator': 'notequal',
                            'type': 'string',
                            'value': 'Pending'
                        },
                        {
                            'field': 'TaskID',
                            'label': 'Task ID',
                            'operator': 'equal',
                            'type': 'number',
                            'value': 5675
                        }]
                }]
        };
        this.onClick = this.onClick.bind(this);
    }
    onClick() {
        this.qryBldrObj.setRules(this.importRules);
    }
    render() {
        return (<div>
                <QueryBuilderComponent width='100%' dataSource={hardwareData} ref={(scope) => { this.qryBldrObj = scope; }} columns={this.columnData}/>
                <div className="e-qb-button">
                    <ButtonComponent id="importrules" cssClass='e-primary' content='Set Rules' onClick={this.onClick}/>
                </div>
            </div>);
    }
}
ReactDom.render(<App />, document.getElementById('querybuilder'));

Importing from SQL

You can set the conditions from SQL query through the setRulesFromSql method.

Source

Preview

app.tsx

index.html

datasource.ts

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { QueryBuilderComponent, ColumnsModel } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from '../datasource.ts';

class App extends React.Component<{}, {}> {
    public qryBldrObj: QueryBuilderComponent;

    public 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' }
    ];
    constructor(props: any) {
        super(props);
        this.importRule = this.importRule.bind(this);
    }
    public importRule(): void {
        this.qryBldrObj.setRulesFromSql("TaskID = 1 and Status LIKE ('Assigned%')");
    }
    public render() {
        return (
            <div>
                <QueryBuilderComponent width='100%' dataSource={hardwareData} ref={(scope) => { this.qryBldrObj = scope as QueryBuilderComponent; }} columns={this.columnData}/>
                <div className="e-qb-button">
                    <ButtonComponent id="importrules" cssClass='e-primary' content='set Rules' onClick = {this.importRule}/>
                </div>
            </div>
        );
    }
}
ReactDom.render(<App />,document.getElementById('querybuilder'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-querybuilder/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='querybuilder'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

/**
 * QueryBuilder datasource
 */
export let employeeData: Array<{[key: string]: any}> = [
	{
		'Address': '507 - 20th Ave. E.\r\nApt. 2A',
		'City': 'Seattle',
		'Country': 'USA',
		'EmployeeID': 1,
		'FirstName': 'Nancy',
		'HireDate': '22/07/2001',
		'LastName': 'Davolio',
		'PostalCode': '98122',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '908 W. Capital Way',
		'City': 'Tacoma',
		'Country': 'USA',
		'EmployeeID': 2,
		'FirstName': 'Andrew',
		'HireDate': '21/04/2003',
		'LastName': 'Fuller',
		'PostalCode': '98401',
		'Region': 'WA',
		'Title': 'Vice President',
		'TitleOfCourtesy': 'Dr.'
	},
	{
		'Address': '722 Moss Bay Blvd.',
		'City': 'Kirkland',
		'Country': 'USA',
		'EmployeeID': 3,
		'FirstName': 'Janet',
		'HireDate': '22/07/2001',
		'LastName': 'Leverling',
		'PostalCode': '98033',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '4110 Old Redmond Rd.',
		'City': 'Redmond',
		'Country': 'USA',
		'EmployeeID': 4,
		'FirstName': 'Margaret',
		'HireDate': '22/07/2004',
		'LastName': 'Peacock',
		'PostalCode': '98052',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mrs.'
	},
	{
		'Address': '14 Garrett Hill',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 5,
		'FirstName': 'Steven',
		'HireDate': '02/04/2001',
		'LastName': 'Buchanan',
		'PostalCode': 'SW1 8JR',
		'Region': null,
		'Title': 'Sales Manager',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': 'Coventry House\r\nMiner Rd.',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 6,
		'FirstName': 'Michael',
		'HireDate': '22/01/2003',
		'LastName': 'Suyama',
		'PostalCode': 'EC2 7JR',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': 'Edgeham Hollow\r\nWinchester Way',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 7,
		'FirstName': 'Robert',
		'HireDate': '22/07/2001',
		'LastName': 'King',
		'PostalCode': 'RG1 9SP',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': '4726 - 11th Ave. N.E.',
		'City': 'Seattle',
		'Country': 'USA',
		'EmployeeID': 8,
		'FirstName': 'Laura',
		'HireDate': '22/07/2001',
		'LastName': 'Callahan',
		'PostalCode': '98105',
		'Region': 'WA',
		'Title': 'Inside Sales Coordinator',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '7 Houndstooth Rd.',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 9,
		'FirstName': 'Anne',
		'HireDate': '22/07/2001',
		'LastName': 'Dodsworth',
		'PostalCode': 'WG2 7LT',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	}
];
export let expenseData: Array<{[key: string]: any}>  = [
	{
		'Amount': '7',
		'Category': 'Food',
		'Description': 'Boiled peanuts',
		'FormattedDate': '06/01/2017 09:12 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Credit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100001'
	},
	{
		'Amount': '8',
		'Category': 'Food',
		'Description': 'Peanuts in Coke',
		'FormattedDate': '06/04/2017 02:43 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100024'
	},
	{
		'Amount': '11',
		'Category': 'Food',
		'Description': 'Palmetto Cheese, Mint julep',
		'FormattedDate': '06/04/2017 08:35 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100025'
	},
	{
		'Amount': '9',
		'Category': 'Transportation',
		'Description': 'Cars and trucks, used',
		'FormattedDate': '06/04/2017 10:25 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Debit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100026'
	},
	{
		'Amount': '8',
		'Category': 'Transportation',
		'Description': 'Public and other transportation',
		'FormattedDate': '06/04/2017 03:55 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Debit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100027'
	},
	{
		'Amount': '160',
		'Category': 'Shopping',
		'Description': 'Household things & Utilities',
		'FormattedDate': '06/04/2017 10:22 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100028'
	},
	{
		'Amount': '110',
		'Category': 'Extra income',
		'Description': 'Income from Sale',
		'FormattedDate': '11/30/2017 02:42 PM',
		'MonthFull': 'November, 2017',
		'MonthShort': 'Nov',
		'PaymentMode': 'Cash',
		'TransactionType': 'Income',
		'UniqueId': 'T101284'
	}
];
export let hardwareData: Array<{[key: string]: any}>  = [
	{
		'AssignedTo': 'John Doe',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2878',
		'Name': 'Lenovo Yoga',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB27932009',
		'Status': 'Assigned',
		'TaskID': 1,
		'WEO': '05/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Others',
		'DOP': '02/12/2018',
		'InvoiceNo': 'INV-3456',
		'Name': 'Acer Aspire',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB35728290',
		'Status': 'In-repair',
		'TaskID': 2,
		'WEO': '03/01/2023'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2763',
		'Name': 'Apple MacBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB35628728',
		'Status': 'In-repair',
		'TaskID': 3,
		'WEO': '04/03/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '03/09/2018',
		'InvoiceNo': 'INV-2980',
		'Name': 'Lenovo ThinkPad',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56209872',
		'Status': 'Pending',
		'TaskID': 4,
		'WEO': '05/12/2021'
	},
	{
		'AssignedTo': 'David Anto',
		'Category': 'Laptop',
		'DOP': '01/10/2018',
		'InvoiceNo': 'INV-3782',
		'Name': 'Dell Inspiron',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56289036',
		'Status': 'Assigned',
		'TaskID': 5,
		'WEO': '04/01/2021'
	},
	{
		'AssignedTo': 'Mary Saveley',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2712',
		'Name': 'HP Pavilion',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56289305',
		'Status': 'Assigned',
		'TaskID': 6,
		'WEO': '05/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '06/16/2018',
		'InvoiceNo': 'INV-0984',
		'Name': 'Asus ZenBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB25637891',
		'Status': 'Pending',
		'TaskID': 7,
		'WEO': '09/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '02/19/2018',
		'InvoiceNo': 'INV-2561',
		'Name': 'HP EliteBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB27819726',
		'Status': 'Ordered',
		'TaskID': 8,
		'WEO': '05/21/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '02/12/2018',
		'InvoiceNo': 'INV-8970',
		'Name': 'Apple MacBook Air',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB05262880',
		'Status': 'Pending',
		'TaskID': 9,
		'WEO': '03/01/2023'
	},
	{
		'AssignedTo': '',
		'Category': 'Tablet',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-4555',
		'Name': 'Apple iPad Air',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB45262777',
		'Status': 'Pending',
		'TaskID': 10,
		'WEO': '05/01/2021'
	}
];

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from '../datasource.ts';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.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' }
        ];
        this.importRule = this.importRule.bind(this);
    }
    importRule() {
        this.qryBldrObj.setRulesFromSql("TaskID = 1 and Status LIKE ('Assigned%')");
    }
    render() {
        return (<div>
                <QueryBuilderComponent width='100%' dataSource={hardwareData} ref={(scope) => { this.qryBldrObj = scope; }} columns={this.columnData}/>
                <div className="e-qb-button">
                    <ButtonComponent id="importrules" cssClass='e-primary' content='set Rules' onClick={this.importRule}/>
                </div>
            </div>);
    }
}
ReactDom.render(<App />, document.getElementById('querybuilder'));

Exporting

Exporting allows you to save or maintain the created conditions through the Query Builder. You can export the defined conditions by the following ways.

Exporting to JSON

You can export the defined conditions to structured JSON object through the getRules method.

Exporting to SQL

You can export the defined conditions to SQL query through the getRulesFromSQL method.

Source

Preview

app.tsx

index.html

datasource.ts

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { AnimationSettingsModel, DialogComponent } from '@syncfusion/ej2-react-popups';
import { ColumnsModel, QueryBuilderComponent, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from '../datasource.ts';

class App extends React.Component<{}, {}> {
    public qryBldrObj: QueryBuilderComponent;
    public dialogInstance: DialogComponent;
    public animationSettings: AnimationSettingsModel = { effect: 'Zoom', duration: 400, delay: 0 };
    public 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' }
    ];

    public importRules: RuleModel = {
        'condition': 'or',
        'rules': [{
            'field': 'Category',
            'label': 'Category',
            'operator': 'equal',
            'type': 'string',
            'value': 'Laptop'
        }]
    };
    constructor(props: any) {
        super(props);
        this.getSql = this.getSql.bind(this);
        this.getRule = this.getRule.bind(this);
    }
    public getSql(): void {
        this.dialogInstance.content = this.qryBldrObj.getSqlFromRules(this.qryBldrObj.getRules());
        this.dialogInstance.show();
    }
    public getRule(): void {
        const validRule = this.qryBldrObj.getValidRules(this.qryBldrObj.rule);
        this.dialogInstance.content = '<pre>' + JSON.stringify(validRule, null, 4) + '</pre>';
        this.dialogInstance.show();
    }
    public render() {
        return (
            <div>
                <QueryBuilderComponent width='100%' dataSource={hardwareData} ref={(scope) => { this.qryBldrObj = scope as QueryBuilderComponent; }} columns={this.columnData} rule={this.importRules}/>
                <div className="e-qb-button">
                    <ButtonComponent cssClass='e-primary' content='Get Sql' onClick = {this.getSql}/>
                    <ButtonComponent cssClass='e-primary' content='Get Rule' onClick = {this.getRule}/>
                </div>
                <DialogComponent id="defaultdialog" showCloseIcon={true} animationSettings={this.animationSettings} ref={dialog => this.dialogInstance = dialog as DialogComponent} height='auto'  header='Querybuilder' visible={false} width='50%' />
            </div>
        );
    }
}
ReactDom.render(<App />,document.getElementById('querybuilder'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-querybuilder/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
	<style type=text/css" rel="stylesheet">
		html, body {
			height: 100%;
		}
	</style>
</head>

<body>
        <div id='querybuilder'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

/**
 * QueryBuilder datasource
 */
export let employeeData: Array<{[key: string]: any}> = [
	{
		'Address': '507 - 20th Ave. E.\r\nApt. 2A',
		'City': 'Seattle',
		'Country': 'USA',
		'EmployeeID': 1,
		'FirstName': 'Nancy',
		'HireDate': '22/07/2001',
		'LastName': 'Davolio',
		'PostalCode': '98122',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '908 W. Capital Way',
		'City': 'Tacoma',
		'Country': 'USA',
		'EmployeeID': 2,
		'FirstName': 'Andrew',
		'HireDate': '21/04/2003',
		'LastName': 'Fuller',
		'PostalCode': '98401',
		'Region': 'WA',
		'Title': 'Vice President',
		'TitleOfCourtesy': 'Dr.'
	},
	{
		'Address': '722 Moss Bay Blvd.',
		'City': 'Kirkland',
		'Country': 'USA',
		'EmployeeID': 3,
		'FirstName': 'Janet',
		'HireDate': '22/07/2001',
		'LastName': 'Leverling',
		'PostalCode': '98033',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '4110 Old Redmond Rd.',
		'City': 'Redmond',
		'Country': 'USA',
		'EmployeeID': 4,
		'FirstName': 'Margaret',
		'HireDate': '22/07/2004',
		'LastName': 'Peacock',
		'PostalCode': '98052',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mrs.'
	},
	{
		'Address': '14 Garrett Hill',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 5,
		'FirstName': 'Steven',
		'HireDate': '02/04/2001',
		'LastName': 'Buchanan',
		'PostalCode': 'SW1 8JR',
		'Region': null,
		'Title': 'Sales Manager',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': 'Coventry House\r\nMiner Rd.',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 6,
		'FirstName': 'Michael',
		'HireDate': '22/01/2003',
		'LastName': 'Suyama',
		'PostalCode': 'EC2 7JR',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': 'Edgeham Hollow\r\nWinchester Way',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 7,
		'FirstName': 'Robert',
		'HireDate': '22/07/2001',
		'LastName': 'King',
		'PostalCode': 'RG1 9SP',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': '4726 - 11th Ave. N.E.',
		'City': 'Seattle',
		'Country': 'USA',
		'EmployeeID': 8,
		'FirstName': 'Laura',
		'HireDate': '22/07/2001',
		'LastName': 'Callahan',
		'PostalCode': '98105',
		'Region': 'WA',
		'Title': 'Inside Sales Coordinator',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '7 Houndstooth Rd.',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 9,
		'FirstName': 'Anne',
		'HireDate': '22/07/2001',
		'LastName': 'Dodsworth',
		'PostalCode': 'WG2 7LT',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	}
];
export let expenseData: Array<{[key: string]: any}>  = [
	{
		'Amount': '7',
		'Category': 'Food',
		'Description': 'Boiled peanuts',
		'FormattedDate': '06/01/2017 09:12 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Credit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100001'
	},
	{
		'Amount': '8',
		'Category': 'Food',
		'Description': 'Peanuts in Coke',
		'FormattedDate': '06/04/2017 02:43 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100024'
	},
	{
		'Amount': '11',
		'Category': 'Food',
		'Description': 'Palmetto Cheese, Mint julep',
		'FormattedDate': '06/04/2017 08:35 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100025'
	},
	{
		'Amount': '9',
		'Category': 'Transportation',
		'Description': 'Cars and trucks, used',
		'FormattedDate': '06/04/2017 10:25 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Debit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100026'
	},
	{
		'Amount': '8',
		'Category': 'Transportation',
		'Description': 'Public and other transportation',
		'FormattedDate': '06/04/2017 03:55 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Debit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100027'
	},
	{
		'Amount': '160',
		'Category': 'Shopping',
		'Description': 'Household things & Utilities',
		'FormattedDate': '06/04/2017 10:22 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100028'
	},
	{
		'Amount': '110',
		'Category': 'Extra income',
		'Description': 'Income from Sale',
		'FormattedDate': '11/30/2017 02:42 PM',
		'MonthFull': 'November, 2017',
		'MonthShort': 'Nov',
		'PaymentMode': 'Cash',
		'TransactionType': 'Income',
		'UniqueId': 'T101284'
	}
];
export let hardwareData: Array<{[key: string]: any}>  = [
	{
		'AssignedTo': 'John Doe',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2878',
		'Name': 'Lenovo Yoga',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB27932009',
		'Status': 'Assigned',
		'TaskID': 1,
		'WEO': '05/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Others',
		'DOP': '02/12/2018',
		'InvoiceNo': 'INV-3456',
		'Name': 'Acer Aspire',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB35728290',
		'Status': 'In-repair',
		'TaskID': 2,
		'WEO': '03/01/2023'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2763',
		'Name': 'Apple MacBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB35628728',
		'Status': 'In-repair',
		'TaskID': 3,
		'WEO': '04/03/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '03/09/2018',
		'InvoiceNo': 'INV-2980',
		'Name': 'Lenovo ThinkPad',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56209872',
		'Status': 'Pending',
		'TaskID': 4,
		'WEO': '05/12/2021'
	},
	{
		'AssignedTo': 'David Anto',
		'Category': 'Laptop',
		'DOP': '01/10/2018',
		'InvoiceNo': 'INV-3782',
		'Name': 'Dell Inspiron',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56289036',
		'Status': 'Assigned',
		'TaskID': 5,
		'WEO': '04/01/2021'
	},
	{
		'AssignedTo': 'Mary Saveley',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2712',
		'Name': 'HP Pavilion',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56289305',
		'Status': 'Assigned',
		'TaskID': 6,
		'WEO': '05/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '06/16/2018',
		'InvoiceNo': 'INV-0984',
		'Name': 'Asus ZenBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB25637891',
		'Status': 'Pending',
		'TaskID': 7,
		'WEO': '09/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '02/19/2018',
		'InvoiceNo': 'INV-2561',
		'Name': 'HP EliteBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB27819726',
		'Status': 'Ordered',
		'TaskID': 8,
		'WEO': '05/21/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '02/12/2018',
		'InvoiceNo': 'INV-8970',
		'Name': 'Apple MacBook Air',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB05262880',
		'Status': 'Pending',
		'TaskID': 9,
		'WEO': '03/01/2023'
	},
	{
		'AssignedTo': '',
		'Category': 'Tablet',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-4555',
		'Name': 'Apple iPad Air',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB45262777',
		'Status': 'Pending',
		'TaskID': 10,
		'WEO': '05/01/2021'
	}
];

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from '../datasource.ts';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.animationSettings = { effect: 'Zoom', duration: 400, delay: 0 };
        this.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' }
        ];
        this.importRules = {
            'condition': 'or',
            'rules': [{
                    'field': 'Category',
                    'label': 'Category',
                    'operator': 'equal',
                    'type': 'string',
                    'value': 'Laptop'
                }]
        };
        this.getSql = this.getSql.bind(this);
        this.getRule = this.getRule.bind(this);
    }
    getSql() {
        this.dialogInstance.content = this.qryBldrObj.getSqlFromRules(this.qryBldrObj.getRules());
        this.dialogInstance.show();
    }
    getRule() {
        const validRule = this.qryBldrObj.getValidRules(this.qryBldrObj.rule);
        this.dialogInstance.content = '<pre>' + JSON.stringify(validRule, null, 4) + '</pre>';
        this.dialogInstance.show();
    }
    render() {
        return (<div>
                <QueryBuilderComponent width='100%' dataSource={hardwareData} ref={(scope) => { this.qryBldrObj = scope; }} columns={this.columnData} rule={this.importRules}/>
                <div className="e-qb-button">
                    <ButtonComponent cssClass='e-primary' content='Get Sql' onClick={this.getSql}/>
                    <ButtonComponent cssClass='e-primary' content='Get Rule' onClick={this.getRule}/>
                </div>
                <DialogComponent id="defaultdialog" showCloseIcon={true} animationSettings={this.animationSettings} ref={dialog => this.dialogInstance = dialog} height='auto' header='Querybuilder' visible={false} width='50%'/>
            </div>);
    }
}
ReactDom.render(<App />, document.getElementById('querybuilder'));

Contents

Initial rendering
Post rendering
Importing from JSON
Importing from SQL
Exporting to JSON
Exporting to SQL

Contents

Initial rendering
Post rendering
Importing from JSON
Importing from SQL
Exporting to JSON
Exporting to SQL

Please provide additional information

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