The column definitions are used as the dataSource schema in the Query Builder. This plays a vital role in rendering column values. The query builder operations such as create or delete conditions and create or delete group they are performed based on the column definitions. The field property of the columns is necessary to map the data source values in the query builder columns.
If the column field is not specified in the
dataSource, the column values will be empty.
The columns are automatically generated when the columns declaration is empty or undefined while initializing the query builder. All the columns in the dataSource are bound as the query builder columns.
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<{}, {}> {
public render() {
return (
<QueryBuilderComponent width='100%' dataSource={employeeData}/>
);
}
}
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 { employeeData } from '../datasource.ts';
class App extends React.Component {
render() {
return (<QueryBuilderComponent width='100%' dataSource={employeeData}/>);
}
}
ReactDom.render(<App />, document.getElementById('querybuilder'));When columns are auto-generated, the column type will be determined from the first record of the
dataSource.
By default, the column label is displayed from the column field value. To override the default label, you have to define the label value.
The operator for a column can be defined in the operators property.
The available operators and its supported data types are:
| Operators | Description | Supported Types |
|---|---|---|
| startswith | Checks whether the value begins with the specified value. | String |
| endswith | Checks whether the value ends with the specified value. | String |
| contains | Checks whether the value contains the specified value. | String |
| equal | Checks whether the value is equal to the specified value. | String Number Date Boolean |
| notequal | Checks whether the value is not equal to the specified value. | String Number Date Boolean |
| greaterthan | Checks whether the value is greater than the specified value. | Date Number |
| greaterthanorequal | Checks whether a value is greater than or equal to the specified value. | Date Number |
| lessthan | Checks whether the value is less than the specified value. | Date Number |
| lessthanorequal | Checks whether the value is less than or equal to the specified value. | Date Number |
| between | Checks whether the value is between the two-specific value. | Date Number |
| notbetween | Checks whether the value is not between the two-specific value. | Date Number |
| in | Checks whether the value is one of the specific values. | String Number |
| notin | Checks whether the value is not in the specific values. | String Number |
The Query Builder allows you to set the step values to the number fields. So that you can easily access the numeric textbox. Use the step property, to set the step value for number values.
The Query Builder formats date and number values. Use the format property to format date and number values.
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: 'Employee ID', operators: [{ key: 'Equal', value: 'equal' },
{ key: 'Greater than', value: 'greaterthan' }, { key: 'Less than', value: 'lessthan' }], step: 10, type: 'number'},
{ field: 'FirstName', label: 'First Name', type: 'string' },
{ field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
{ field: 'Title', label: 'Title', type: 'string' },
{ field: 'HireDate', label: 'Hire Date', 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': 'Employee ID',
'operator': 'equal',
'type': 'number',
'value': 1001
},
{
'field': 'HireDate',
'label': 'Hire Date',
'operator': 'equal',
'type': 'date',
'value': '07/05/1991'
},
{
'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'));<!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 { employeeData } from '../datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.columnData = [
{ field: 'EmployeeID', label: 'Employee ID', operators: [{ key: 'Equal', value: 'equal' },
{ key: 'Greater than', value: 'greaterthan' }, { key: 'Less than', value: 'lessthan' }], step: 10, type: 'number' },
{ field: 'FirstName', label: 'First Name', type: 'string' },
{ field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
{ field: 'Title', label: 'Title', type: 'string' },
{ field: 'HireDate', label: 'Hire Date', 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': 'Employee ID',
'operator': 'equal',
'type': 'number',
'value': 1001
},
{
'field': 'HireDate',
'label': 'Hire Date',
'operator': 'equal',
'type': 'date',
'value': '07/05/1991'
},
{
'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'));Validation allows you to validate the conditions and it display errors for invalid fields while using the validateFields method. To enable validation in the query builder , set the allowValidation to true. Column fields are validated after setting allowValidation as to true. So, you should manually configure the validation for Operator and, Value fields through validation.
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnsModel, 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<{}, {}> {
public qryBldrObj: QueryBuilderComponent;
public columnData: ColumnsModel[] = [
{ field: 'EmployeeID', label: 'EmployeeID', type: 'number', validation: { isRequired: true } },
{ 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', format: 'dd/MM/yyyy', label: 'HireDate', type: 'date' },
{ field: 'Country', label: 'Country', type: 'string' },
{ field: 'City', label: 'City', type: 'string' }
];
constructor(props: any) {
super(props);
this.onClick = this.onClick.bind(this);
}
public onClick(): void {
this.qryBldrObj.validateFields();
}
public render() {
return (
<div>
<QueryBuilderComponent width='100%' dataSource={employeeData} columns={this.columnData} allowValidation={true} ref={(scope) => { this.qryBldrObj = scope as QueryBuilderComponent; }}/>
<div className="e-qb-button">
<ButtonComponent id="validatebtn" cssClass='e-primary' content='Validate Fields' 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 { employeeData } from '../datasource.ts';
class App extends React.Component {
constructor(props) {
super(props);
this.columnData = [
{ field: 'EmployeeID', label: 'EmployeeID', type: 'number', validation: { isRequired: true } },
{ 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', format: 'dd/MM/yyyy', label: 'HireDate', type: 'date' },
{ field: 'Country', label: 'Country', type: 'string' },
{ field: 'City', label: 'City', type: 'string' }
];
this.onClick = this.onClick.bind(this);
}
onClick() {
this.qryBldrObj.validateFields();
}
render() {
return (<div>
<QueryBuilderComponent width='100%' dataSource={employeeData} columns={this.columnData} allowValidation={true} ref={(scope) => { this.qryBldrObj = scope; }}/>
<div className="e-qb-button">
<ButtonComponent id="validatebtn" cssClass='e-primary' content='Validate Fields' onClick={this.onClick}/>
</div>
</div>);
}
}
ReactDom.render(<App />, document.getElementById('querybuilder'));Set
isRequiredvalidation for Operator and Value fields. Setmin,maxvalues for number values.
Template allows you to define your own input widgets for columns. To implement template, you can define the following functions
create: Creates the custom component.write: Wire events for the custom component.Destroy: Destroy the custom component.In the following sample, dropdown is used as the custom component in the PaymentMode column.
import { getComponent } from '@syncfusion/ej2-base';
import { ChangeEventArgs, DropDownList, MultiSelect, MultiSelectChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { ColumnsModel, QueryBuilderComponent, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { expenseData } from '../datasource.ts';
class App extends React.Component<{}, {}> {
public qryBldrObj: QueryBuilderComponent;
public elem: HTMLElement;
public dropDownObj: DropDownList;
public multiSelectObj: MultiSelect;
public inOperators: string [] = ['in', 'notin'];
public filter: ColumnsModel[] = [
{
field: 'PaymentMode', label: 'Payment Mode', operators: [
{ key: 'Equal', value: 'equal' },
{ key: 'Not Equal', value: 'notequal' },
{ key: 'In', value: 'in' },
{ key: 'Not In', value: 'notin' }
], template: {
create: () => {
this.elem = document.createElement('input');
this.elem.setAttribute('type', 'text');
return this.elem;
},
destroy: (args: { elementId: string }) => {
this.multiSelectObj = getComponent(document.getElementById(args.elementId) as HTMLElement, 'multiselect') as MultiSelect;
if (this.multiSelectObj) {
this.multiSelectObj.destroy();
}
this.dropDownObj = getComponent(document.getElementById(args.elementId) as HTMLElement, 'dropdownlist') as DropDownList;
if (this.dropDownObj) {
this.dropDownObj.destroy();
}
},
write: (args: { elements: Element, values: string[] | string, operator: string }) => {
const ds = ['Cash', 'Debit Card', 'Credit Card', 'Net Banking', 'Wallet'];
if (this.inOperators.indexOf(args.operator) > -1) {
this.multiSelectObj = new MultiSelect({
change: (e: MultiSelectChangeEventArgs) => {
this.qryBldrObj.notifyChange(e.value as string[], e.element);
},
dataSource: ds,
mode: 'CheckBox',
placeholder: 'Select Transaction',
value: args.values as string []
});
this.multiSelectObj.appendTo('#' + args.elements.id);
} else {
this.dropDownObj = new DropDownList({
change: (e: ChangeEventArgs) => {
this.qryBldrObj.notifyChange(e.itemData.value as string, e.element);
},
dataSource: ds,
value: args.values ? args.values as string : ds[0]
});
this.dropDownObj.appendTo('#' + args.elements.id);
}
}
}, type: 'string'
},
{ field: 'Description', label: 'Description', type: 'string' },
{ field: 'Date', label: 'Date', type: 'date' }
];
public importRules: RuleModel = {
'condition': 'or',
'rules': [{
'field': 'PaymentMode',
'label': 'PaymentMode',
'operator': 'equal',
'type': 'string',
'value': 'Cash'
}]
};
public render() {
return (
<QueryBuilderComponent dataSource={expenseData} columns={this.filter} width='100%' rule={this.importRules} ref={(scope) => { this.qryBldrObj = scope as 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/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 { getComponent } from '@syncfusion/ej2-base';
import { DropDownList, MultiSelect } from '@syncfusion/ej2-react-dropdowns';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { expenseData } from '../datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.inOperators = ['in', 'notin'];
this.filter = [
{
field: 'PaymentMode', label: 'Payment Mode', operators: [
{ key: 'Equal', value: 'equal' },
{ key: 'Not Equal', value: 'notequal' },
{ key: 'In', value: 'in' },
{ key: 'Not In', value: 'notin' }
], template: {
create: () => {
this.elem = document.createElement('input');
this.elem.setAttribute('type', 'text');
return this.elem;
},
destroy: (args) => {
this.multiSelectObj = getComponent(document.getElementById(args.elementId), 'multiselect');
if (this.multiSelectObj) {
this.multiSelectObj.destroy();
}
this.dropDownObj = getComponent(document.getElementById(args.elementId), 'dropdownlist');
if (this.dropDownObj) {
this.dropDownObj.destroy();
}
},
write: (args) => {
const ds = ['Cash', 'Debit Card', 'Credit Card', 'Net Banking', 'Wallet'];
if (this.inOperators.indexOf(args.operator) > -1) {
this.multiSelectObj = new MultiSelect({
change: (e) => {
this.qryBldrObj.notifyChange(e.value, e.element);
},
dataSource: ds,
mode: 'CheckBox',
placeholder: 'Select Transaction',
value: args.values
});
this.multiSelectObj.appendTo('#' + args.elements.id);
}
else {
this.dropDownObj = new DropDownList({
change: (e) => {
this.qryBldrObj.notifyChange(e.itemData.value, e.element);
},
dataSource: ds,
value: args.values ? args.values : ds[0]
});
this.dropDownObj.appendTo('#' + args.elements.id);
}
}
}, type: 'string'
},
{ field: 'Description', label: 'Description', type: 'string' },
{ field: 'Date', label: 'Date', type: 'date' }
];
this.importRules = {
'condition': 'or',
'rules': [{
'field': 'PaymentMode',
'label': 'PaymentMode',
'operator': 'equal',
'type': 'string',
'value': 'Cash'
}]
};
}
render() {
return (<QueryBuilderComponent dataSource={expenseData} columns={this.filter} width='100%' rule={this.importRules} ref={(scope) => { this.qryBldrObj = scope; }}/>);
}
}
ReactDom.render(<App />, document.getElementById('querybuilder'));Rule Template allows to define your own user interface for columns. To implement ruleTemplate, you can create the user interface as React component and assign the values through actionBegin event.
In the following sample, dropdown and slider are used as the custom component and applied greaterthanorequal operator to Age column.
import { getComponent, setValue } from '@syncfusion/ej2-base';
import { ChangeEventArgs, DropDownList } from '@syncfusion/ej2-react-dropdowns';
import { QueryBuilderComponent, ColumnsDirective, ColumnDirective, RuleModel, ActionEventArgs } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from '../datasource.ts';
import { AgeTemplate } from './template';
class App extends React.Component<{}, {}> {
public qryBldrObj: QueryBuilderComponent;
public elem: HTMLElement;
public importRules: RuleModel = {
'condition': 'or',
'rules': [{
'field': 'Age',
'label': 'Age',
'operator': 'greaterthanorequal',
'type': 'number',
'value': 30
}]
};
public ageTemplate(props): any {
return (<AgeTemplate {...props} />);
}
public actionBegin(args: ActionEventArgs): void {
this.ruleID = args.ruleID;
args.rule.operator = 'greaterthanorequal';
if (args.requestType === 'template-initialize') {
if (args.rule.value === '') {
args.rule.value = 30;
}
}
}
public render() {
return (
<QueryBuilderComponent dataSource={employeeData} width='100%' rule={this.importRules} ref={(scope) => { this.qryBldrObj = scope as QueryBuilderComponent; }} actionBegin={this.actionBegin.bind(this)} id='querybuilder'>
<ColumnsDirective>
<ColumnDirective field="EmployeeID" label="Employee ID" type="number"/>
<ColumnDirective field="LastName" label="Last Name" type="string"/>
<ColumnDirective field="FirstName" label="First Name" type="string"/>
<ColumnDirective field="Age" label="Age" type="number" ruleTemplate={this.ageTemplate}/>
<ColumnDirective field="City" label="City" type="string"/>
<ColumnDirective field="Country" label="Country" type="string"/>
</ColumnsDirective>
</QueryBuilderComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('querybuilder-component'));import * as React from 'react';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { getComponent, compile } from '@syncfusion/ej2-base';
import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuider';
import { QueryBuilder, ActionEventArgs, RuleModel } from '@syncfusion/ej2-querybuider';
import { employeeData } from '../datasource.ts';
export class AgeTemplate extends React.Component<{}, {}> {
public qryBldrObj: QueryBuilderComponent;
public sliderObj: SliderComponent;
public rangeTicks: object = { placement: 'Before', largeStep: 5, showSmallTicks: true };
constructor(props: object) {
super(props);
this.state = Object.assign({}, props);
this.qryBldrObj = getComponent(document.getElementById('querybuilder'), 'query-builder') as QueryBuilder;
}
public fieldChange(args: any): void {
this.qryBldrObj.notifyChange(args.value, args.element, 'field');
}
public valueChange(args: any): void {
let elem: Element = this.sliderObj.element;
this.qryBldrObj.notifyChange(args.value, elem, 'value');
this.refreshTable(this.qryBldrObj.getRule(elem), elem.id.split('_valuekey0')[0]);
}
public sliderCreated() {
let elem: Element = this.sliderObj.element;
this.refreshTable(this.qryBldrObj.getRule(elem), elem.id.split('_valuekey0')[0]);
}
public myFunction(ruleID: string): void {
let element: Element = document.getElementById(ruleID + '_section');
if (element.className.indexOf('e-hide') > -1) {
element.className = element.className.replace('e-hide', '');
document.getElementById(ruleID + '_option').textContent = 'Hide Details';
} else {
element.className += ' e-hide';
document.getElementById(ruleID + '_option').textContent = 'View Details';
}
}
public refreshTable(rule: RuleModel, ruleID: string): void {
let template: string = '<tr><td>${EmployeeID}</td><td>${FirstName}</td><td>${Age}</td></tr>';
let compiledFunction: any = compile(template);
let predicate: Predicate = this.qryBldrObj.getPredicate({condition: 'and', rules: [rule]});
let dataManagerQuery: Query = new Query().select(['EmployeeID', 'FirstName', 'Age']).where(predicate);
let result: object[] = new DataManager(employeeData).executeLocal(dataManagerQuery);
let table: HTMLElement = document.getElementById(ruleID + '_datatable') as HTMLElement;
if (result.length) {
table.style.display = 'block';
} else {
table.style.display = 'none';
}
table.querySelector('tbody').innerHTML = '';
result.forEach((data) => {
table.querySelector('tbody').appendChild(compiledFunction(data)[0].querySelector('tr'));
});
}
public render() {
const args: ActionEventArgs = this.state;
return (
<div className="e-rule e-rule-template">
<div className="e-rule-filter e-custom-filter">
<DropDownListComponent change={this.fieldChange.bind(this)} fields={args.fields} dataSource={args.columns} value={args.rule.field}/>
</div>
<div>
<div className="e-slider-value">
<SliderComponent ticks={this.rangeTicks} ref={(scope) => { this.sliderObj = scope as SliderComponent; }} id={args.ruleID + '_valuekey0'} change={this.valueChange.bind(this)} created={this.sliderCreated.bind(this)} value={args.rule.value} min={30} max={50} />
</div>
<div className="e-rule-btn">
<button id={args.ruleID + '_option'} onClick={this.myFunction.bind(this, args.ruleID)} className="e-primary e-btn e-small">
View Details
</button>
<button className="e-removerule e-rule-delete e-css e-btn e-small e-round">
<span className="e-btn-icon e-icons e-delete-icon"/>
</button>
</div>
</div>
<div id={args.ruleID + '_section'} className="e-rule-value-group e-hide">
<div>
<table id={args.ruleID + '_datatable'} className='e-rule-table e-hide'>
<thead>
<tr><th>EmployeeID</th><th>FirstName</th><th>Age</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
);
}
}<!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-component'>
<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',
'Age': 30,
'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',
'Age': 31,
'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.',
'Age': 32,
'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.',
'Age': 33,
'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',
'Age': 34,
'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.',
'Age': 35,
'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',
'Age': 36,
'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.',
'Age': 37,
'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.',
'Age': 38,
'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, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from '../datasource.ts';
import { AgeTemplate } from './template';
class App extends React.Component {
constructor() {
super(...arguments);
this.importRules = {
'condition': 'or',
'rules': [{
'field': 'Age',
'label': 'Age',
'operator': 'greaterthanorequal',
'type': 'number',
'value': 30
}]
};
}
ageTemplate(props) {
return (<AgeTemplate {...props}/>);
}
actionBegin(args) {
this.ruleID = args.ruleID;
args.rule.operator = 'greaterthanorequal';
if (args.requestType === 'template-initialize') {
if (args.rule.value === '') {
args.rule.value = 30;
}
}
}
render() {
return (<QueryBuilderComponent dataSource={employeeData} width='100%' rule={this.importRules} ref={(scope) => { this.qryBldrObj = scope; }} actionBegin={this.actionBegin.bind(this)} id='querybuilder'>
<ColumnsDirective>
<ColumnDirective field="EmployeeID" label="Employee ID" type="number"/>
<ColumnDirective field="LastName" label="Last Name" type="string"/>
<ColumnDirective field="FirstName" label="First Name" type="string"/>
<ColumnDirective field="Age" label="Age" type="number" ruleTemplate={this.ageTemplate}/>
<ColumnDirective field="City" label="City" type="string"/>
<ColumnDirective field="Country" label="Country" type="string"/>
</ColumnsDirective>
</QueryBuilderComponent>);
}
}
ReactDom.render(<App />, document.getElementById('querybuilder-component'));import * as React from 'react';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { getComponent, compile } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { employeeData } from '../datasource.ts';
export class AgeTemplate extends React.Component {
constructor(props) {
super(props);
this.rangeTicks = { placement: 'Before', largeStep: 5, showSmallTicks: true };
this.state = Object.assign({}, props);
this.qryBldrObj = getComponent(document.getElementById('querybuilder'), 'query-builder');
}
fieldChange(args) {
this.qryBldrObj.notifyChange(args.value, args.element, 'field');
}
valueChange(args) {
let elem = this.sliderObj.element;
this.qryBldrObj.notifyChange(args.value, elem, 'value');
this.refreshTable(this.qryBldrObj.getRule(elem), elem.id.split('_valuekey0')[0]);
}
sliderCreated() {
let elem = this.sliderObj.element;
this.refreshTable(this.qryBldrObj.getRule(elem), elem.id.split('_valuekey0')[0]);
}
myFunction(ruleID) {
let element = document.getElementById(ruleID + '_section');
if (element.className.indexOf('e-hide') > -1) {
element.className = element.className.replace('e-hide', '');
document.getElementById(ruleID + '_option').textContent = 'Hide Details';
}
else {
element.className += ' e-hide';
document.getElementById(ruleID + '_option').textContent = 'View Details';
}
}
refreshTable(rule, ruleID) {
let template = '<tr><td>${EmployeeID}</td><td>${FirstName}</td><td>${Age}</td></tr>';
let compiledFunction = compile(template);
let predicate = this.qryBldrObj.getPredicate({ condition: 'and', rules: [rule] });
let dataManagerQuery = new Query().select(['EmployeeID', 'FirstName', 'Age']).where(predicate);
let result = new DataManager(employeeData).executeLocal(dataManagerQuery);
let table = document.getElementById(ruleID + '_datatable');
if (result.length) {
table.style.display = 'block';
}
else {
table.style.display = 'none';
}
table.querySelector('tbody').innerHTML = '';
result.forEach((data) => {
table.querySelector('tbody').appendChild(compiledFunction(data)[0].querySelector('tr'));
});
}
render() {
const args = this.state;
return (<div className="e-rule e-rule-template">
<div className="e-rule-filter e-custom-filter">
<DropDownListComponent change={this.fieldChange.bind(this)} fields={args.fields} dataSource={args.columns} value={args.rule.field}/>
</div>
<div>
<div className="e-slider-value">
<SliderComponent ticks={this.rangeTicks} ref={(scope) => { this.sliderObj = scope; }} id={args.ruleID + '_valuekey0'} change={this.valueChange.bind(this)} created={this.sliderCreated.bind(this)} value={args.rule.value} min={30} max={50}/>
</div>
<div className="e-rule-btn">
<button id={args.ruleID + '_option'} onClick={this.myFunction.bind(this, args.ruleID)} className="e-primary e-btn e-small">
View Details
</button>
<button className="e-removerule e-rule-delete e-css e-btn e-small e-round">
<span className="e-btn-icon e-icons e-delete-icon"/>
</button>
</div>
</div>
<div id={args.ruleID + '_section'} className="e-rule-value-group e-hide">
<div>
<table id={args.ruleID + '_datatable'} className='e-rule-table e-hide'>
<thead>
<tr><th>EmployeeID</th><th>FirstName</th><th>Age</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>);
}
}