The Query Builder uses DataManager, which supports both RESTful JSON data services binding and local JavaScript object array binding. The dataSource property can be assigned either with the instance of DataManager or JavaScript object array collection. It supports two kind of databinding method:
To bind local data to the query builder, you can assign the dataSource property with a JavaScript object array. The local data source can also be provided as an instance of the DataManager.
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from '../datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.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' }
];
this.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'
}]
};
}
render() {
return (<QueryBuilderComponent width='100%' dataSource={employeeData} 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/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/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 { 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.ts';
class App extends React.Component<{}, {}> {
public 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' }
];
public 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'
}]
};
public render() {
return (
<QueryBuilderComponent width='100%' dataSource={employeeData} columns={this.columnData} rule={this.importRules} />
);
}
}
ReactDom.render(<App />,document.getElementById('querybuilder'));By default,
DataManagerusesJsonAdaptorfor local data-binding.
To bind remote data to the query builder, assign service data as an instance of DataManager to the dataSource property. To interact with remote data source, provide the endpoint url.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import { DataManager } from '@syncfusion/ej2-data';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.data = new DataManager({
url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/',
});
this.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' }
];
this.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'
}]
};
}
render() {
return (<QueryBuilderComponent width='100%' dataSource={this.data} columns={this.columnData} rule={this.importRules}></QueryBuilderComponent>);
}
}
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/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/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 * 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';
export default class App extends React.Component<{}, {}> {
public data = new DataManager({
url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/',
});
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' }
];
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'
}]
};
render() {
return (
<QueryBuilderComponent width='100%' dataSource={this.data} columns={this.columnData} rule={this.importRules} ></QueryBuilderComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('querybuilder'));By default,
DataManagerusesODataAdaptorfor remote data-binding.
OData is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Refer to the following code example for remote Data binding using OData service.
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';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.data = new DataManager({
url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/',
adaptor: new ODataAdaptor,
crossDomain: true
});
this.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' }
];
this.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'
}]
};
}
render() {
return (<QueryBuilderComponent width='100%' dataSource={this.data} columns={this.columnData} rule={this.importRules}></QueryBuilderComponent>);
}
}
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/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/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 * 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';
export default class App extends React.Component<{}, {}> {
public data = new DataManager({
url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/',
adaptor: new ODataAdaptor,
crossDomain: true
});
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' }
];
public 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'
}]
};
public render() {
return (
<QueryBuilderComponent width='100%' dataSource={this.data} columns={this.columnData} rule={this.importRules} ></QueryBuilderComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('querybuilder'));The ODataV4 is an improved version of OData protocols, and the DataManager can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the odata documentation. To bind OData v4 service, use the ODataV4Adaptor.
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';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.data = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
adaptor: new ODataV4Adaptor
});
this.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' }
];
this.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'
}]
};
}
render() {
return (<QueryBuilderComponent width='100%' dataSource={this.data} columns={this.columnData} rule={this.importRules}></QueryBuilderComponent>);
}
}
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/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/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 * 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';
export default class App extends React.Component<{}, {}> {
public data = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
adaptor: new ODataV4Adaptor
});
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' }
];
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'
}]
};
render() {
return (
<QueryBuilderComponent width='100%' dataSource={this.data} columns={this.columnData} rule={this.importRules} ></QueryBuilderComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('querybuilder'));You can use WebApiAdaptor to bind query builder with Web API created using OData endpoint.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent, ColumnsModel, RuleModel } from '@syncfusion/ej2-react-querybuilder';
export default class App extends React.Component<{}, {}> {
public data = new DataManager({
url: '/api/OrderAPI',
adaptor: new WebApiAdaptor
});
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' }
];
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'
}]
};
render() {
return (
<QueryBuilderComponent width='100%' dataSource={this.data} columns={this.columnData} rule={this.importRules} ></QueryBuilderComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('querybuilder'));import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.data = new DataManager({
url: '/api/OrderAPI',
adaptor: new WebApiAdaptor
});
this.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' }
];
this.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'
}]
};
}
render() {
return (<QueryBuilderComponent width='100%' dataSource={this.data} columns={this.columnData} rule={this.importRules}></QueryBuilderComponent>);
}
}
ReactDom.render(<App />, document.getElementById('querybuilder'));You can use the created conditions in DataManager through the getPredicate method. This method creates predicates which is used as conditions in DataManager. In this example given below, getValidRules method is used to get the valid queried data.
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 * 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': 'TaskID',
'label': 'Task ID',
'operator': 'equal',
'type': 'number',
'value': 1
}]
};
this.onClick = this.onClick.bind(this);
this.state = { result: [], style: { display: 'none' } };
}
onClick() {
const validRule = this.qryBldrObj.getValidRules(this.qryBldrObj.rule);
const dataManagerQuery = new Query().select(['TaskID', 'Category', 'Status']).where(this.qryBldrObj.getPredicate(validRule)).take(8);
this.setState({ result: new DataManager(hardwareData).executeLocal(dataManagerQuery), style: { display: 'block' } });
}
render() {
return (<div>
<QueryBuilderComponent width='100%' dataSource={hardwareData} columns={this.columnData} rule={this.importRules} ref={(scope) => { this.qryBldrObj = scope; }}/>
<div className="e-qb-button">
<ButtonComponent id="getdata" cssClass='e-primary' content='get data' onClick={this.onClick}/>
</div>
<table id="datatable" className="e-table" style={this.state.style}>
<thead>
<tr><th>TaskID</th><th>Category</th><th>Status</th></tr>
</thead>
<tbody>{this.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>);
}
}
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/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/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 { 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 * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from '../datasource.ts';
class App extends React.Component<{}, {result: any [], style: any}> {
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': 'TaskID',
'label': 'Task ID',
'operator': 'equal',
'type': 'number',
'value': 1
}]
};
constructor(props: any) {
super(props);
this.onClick = this.onClick.bind(this);
this.state = {result: [], style: {display: 'none'} };
}
public onClick(): void {
const validRule = this.qryBldrObj.getValidRules(this.qryBldrObj.rule);
const dataManagerQuery = new Query().select(['TaskID', 'Category', 'Status']).where(this.qryBldrObj.getPredicate(validRule)).take(8);
this.setState({result: new DataManager(hardwareData).executeLocal(dataManagerQuery), style: {display: 'block'}});
}
public render() {
return (
<div>
<QueryBuilderComponent width='100%' dataSource={hardwareData} columns={this.columnData} rule={this.importRules}
ref={(scope) => { this.qryBldrObj = scope as QueryBuilderComponent; }}/>
<div className="e-qb-button">
<ButtonComponent id="getdata" cssClass='e-primary' content='get data' onClick = {this.onClick} />
</div>
<table id="datatable" className="e-table" style={this.state.style}>
<thead>
<tr><th>TaskID</th><th>Category</th><th>Status</th></tr>
</thead>
<tbody>{this.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>
);
}
}
ReactDom.render(<App />,document.getElementById('querybuilder'));Complex Data Binding allows you to create subfield for columns. To implement complex data binding, either bind the complex data in nested columns or specify complex data source and separator must be given in querybuilder.
In the following sample, complex data was bound in nested columns.
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';
class App extends React.Component {
constructor() {
super(...arguments);
this.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'
}]
}],
};
this.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' }
];
this.columns2 = [
{ field: 'FirstName', label: 'First Name', type: 'string' },
{ field: 'LastName', label: 'Last Name', type: 'string' }
];
this.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' }
];
}
onReset() {
this.qryBldrObj.reset();
}
onSetsqlRules() {
this.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)");
}
onSetrules() {
this.qryBldrObj.setRules(this.importRules);
}
render() {
return (<div>
<div>
<table>
<tr>
<td> <ButtonComponent id="reset" className="e-control e-danger e-btn e-small" onClick={this.onReset.bind(this)}>Reset</ButtonComponent> </td>
<td> <ButtonComponent id="rule" className="e-control e-success e-btn e-small" onClick={this.onSetsqlRules.bind(this)}>SetSqlRules</ButtonComponent></td>
<td> <ButtonComponent id="sql" className="e-control e-success e-btn e-small" onClick={this.onSetrules.bind(this)}>SetRules</ButtonComponent> </td>
</tr>
</table>
</div>
<QueryBuilderComponent width='100%' rule={this.importRules} id='querybuilder' separator="." enableNotCondition="true" ref={(scope) => { this.qryBldrObj = scope; }}>
<ColumnsDirective>
<ColumnDirective field="Employee" label="Employee" columns={this.columns1}/>
<ColumnDirective field="Name" label="Name" columns={this.columns2}/>
<ColumnDirective field="Country" label="Country" columns={this.columns3}/>
</ColumnsDirective>
</QueryBuilderComponent>
</div>);
}
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder-component'));<!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/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/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-component'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>/**
* QueryBuilder datasource
*/
export let complexData: Object[] = [{
'Employee': {
'ID': 1001,
'DOB': new Date(1996, 4, 23),
'HireDate': new Date(2015, 3, 21),
'Salary': 1000,
'Age': 23,
'Title': 'Mr'
},
'Name': {
'FirstName': 'Joe',
'LastName': 'peter'
},
'Country': {
'State': {
'City': 'San diego',
'Zipcode': 22434,
},
'Region': 'Pacific',
'Name': 'USA'
}
},
{
'Employee': {
'ID': 1002,
'DOB': new Date(1995, 2, 28),
'HireDate': new Date(2015, 5, 25),
'Salary': 1300,
'Age': 25,
'Title': 'Mr'
},
'Name': {
'FirstName': 'Mark',
'LastName': 'lawrence'
},
'Country': {
'State': {
'City': 'Houston',
'Zipcode': 77001
},
'Region': 'South central',
'Name': 'USA'
}
},
{
'Employee': {
'ID': 1003,
'DOB': new Date(1996, 7, 7),
'HireDate': new Date(2018, 9, 11),
'Salary': 1400,
'Age': 20,
'Title': 'Mr'
},
'Name': {
'FirstName': 'David',
'LastName': 'malan'
},
'Country': {
'State': {
'City': 'Jersey City',
'Zipcode': 27097
},
'Region': 'Mid-Atlantic',
'Name': 'USA'
}
}];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';
class App extends React.Component {
public qryBldrObj: QueryBuilderComponent;
public 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'
}]
}],
};
public 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'}
];
public columns2: ColumnsModel[]= [
{ field: 'FirstName', label: 'First Name', type: 'string'},
{ field: 'LastName', label: 'Last Name', type: 'string'}
];
public 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'}
];
public onReset(): void{
this.qryBldrObj.reset();
}
public onSetsqlRules(): void{
this.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)");
}
public onSetrules(): void{
this.qryBldrObj.setRules(this.importRules);
}
public render() {
return (<div>
<div>
<table>
<tr>
<td> <ButtonComponent id="reset" className="e-control e-danger e-btn e-small" onClick={this.onReset.bind(this)}>Reset</ButtonComponent> </td>
<td> <ButtonComponent id="rule" className="e-control e-success e-btn e-small" onClick={this.onSetsqlRules.bind(this)}>SetSqlRules</ButtonComponent></td>
<td> <ButtonComponent id="sql" className="e-control e-success e-btn e-small" onClick={this.onSetrules.bind(this)}>SetRules</ButtonComponent> </td>
</tr>
</table>
</div>
<QueryBuilderComponent width='100%' rule={this.importRules} id='querybuilder' separator= "." enableNotCondition ="true" ref={(scope) => { this.qryBldrObj = scope; }} >
<ColumnsDirective>
<ColumnDirective field="Employee" label="Employee" columns={this.columns1} />
<ColumnDirective field="Name" label="Name" columns={this.columns2} />
<ColumnDirective field="Country" label="Country" columns={this.columns3} />
</ColumnsDirective>
</QueryBuilderComponent>
</div>);
}
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder-component'));