JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Data Binding in JavaScript QueryBuilder control

18 May 2022 / 9 minutes to read

The Query Builder uses DataManager to bind the datasource, 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:

  • Local data
  • Remote data

Local data

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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';

let employeeData: Object[] = [{
  'EmployeeID': 1,
  'FirstName': 'Nancy',
  'Title': 'Sales Representative',
  'TitleOfCourtesy': 'Ms.',
  'HireDate': '22/07/2001',
  'City': 'Seattle',
  'Country': 'USA'
},
{
  'EmployeeID': 2,
  'FirstName': 'Andrew',
  'Title': 'Vice President',
  'TitleOfCourtesy': 'Dr.',
  'HireDate': '21/04/2003',
  'City': 'Tacoma',
  'Country': 'USA'
},
{
  'EmployeeID': 3,
  'FirstName': 'Janet',
  'Title': 'Sales Representative',
  'TitleOfCourtesy': 'Ms.',
  'HireDate': '22/07/2001',
  'City': 'Kirkland',
  'Country': 'USA'
}];

let columnData: ColumnsModel[] = [
    {
        field: 'EmployeeID', label: 'EmployeeID', type: 'number'
    },
    { field: 'FirstName', label: 'FirstName', type: 'string' },
    { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
    { field: 'Title', label: 'Title', type: 'string' },
    { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
    { field: 'Country', label: 'Country', type: 'string' },
    { field: 'City', label: 'City', type: 'string' }
];
let importRules: RuleModel = {
    'condition': 'and',
    'rules': [{
        'label': 'EmployeeID',
        'field': 'EmployeeID',
        'type': 'number',
        'operator': 'equal',
        'value': 1001
    },
    {
        'label': 'Title',
        'field': 'Title',
        'type': 'string',
        'operator': 'equal',
        'value': 'Sales Manager'
    }]
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
    width: '70%',
    dataSource: employeeData,
    columns: columnData,
    rule: importRules,
});
qryBldrObj.appendTo('#querybuilder');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-querybuilder/styles/material.css" rel="stylesheet" />
    <link href="styles.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='loader'>LOADING....</div>
    <div id='container'>
        <div id='querybuilder'></div>
         <div id='property'> </div>
    </div>
</body>
</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-query-builder {
  margin: 0 auto;
}

By default, DataManager uses JsonAdaptor for local data-binding.

Remote data

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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';

let data: DataManager = new DataManager({
url: 'https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders/',
adaptor: new ODataAdaptor
});

let columnData: ColumnsModel[] = [
    {
        field: 'EmployeeID', label: 'EmployeeID', type: 'number'
    },
    { field: 'FirstName', label: 'FirstName', type: 'string' },
    { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
    { field: 'Title', label: 'Title', type: 'string' },
    { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
    { field: 'Country', label: 'Country', type: 'string' },
    { field: 'City', label: 'City', type: 'string' }
];
let importRules: RuleModel = {
    'condition': 'and',
    'rules': [{
        'label': 'EmployeeID',
        'field': 'EmployeeID',
        'type': 'number',
        'operator': 'equal',
        'value': 1001
    },
    {
        'label': 'Title',
        'field': 'Title',
        'type': 'string',
        'operator': 'equal',
        'value': 'Sales Manager'
    }]
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
    width: '70%',
    dataSource: data,
    columns: columnData,
    rule: importRules,
});
qryBldrObj.appendTo('#querybuilder');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-querybuilder/styles/material.css" rel="stylesheet" />
    <link href="styles.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='loader'>LOADING....</div>
    <div id='container'>
        <div id='querybuilder'></div>
         <div id='property'> </div>
    </div>
</body>
</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-query-builder {
  margin: 0 auto;
}

By default, DataManager uses ODataAdaptor for remote data-binding.

Binding with OData services

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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';

let data: DataManager = new DataManager({
url: 'https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders/',
adaptor: new ODataAdaptor,
crossDomain: true
});

let columnData: ColumnsModel[] = [
    {
        field: 'EmployeeID', label: 'EmployeeID', type: 'number'
    },
    { field: 'FirstName', label: 'FirstName', type: 'string' },
    { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
    { field: 'Title', label: 'Title', type: 'string' },
    { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
    { field: 'Country', label: 'Country', type: 'string' },
    { field: 'City', label: 'City', type: 'string' }
];
let importRules: RuleModel = {
    'condition': 'and',
    'rules': [{
        'label': 'EmployeeID',
        'field': 'EmployeeID',
        'type': 'number',
        'operator': 'equal',
        'value': 1001
    },
    {
        'label': 'Title',
        'field': 'Title',
        'type': 'string',
        'operator': 'equal',
        'value': 'Sales Manager'
    }]
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
    width: '70%',
    dataSource: data,
    columns: columnData,
    rule: importRules,
});
qryBldrObj.appendTo('#querybuilder');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-querybuilder/styles/material.css" rel="stylesheet" />
    <link href="styles.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='loader'>LOADING....</div>
    <div id='container'>
        <div id='querybuilder'></div>
         <div id='property'> </div>
    </div>
</body>
</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-query-builder {
  margin: 0 auto;
}

Binding with OData v4 services

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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

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

let columnData: ColumnsModel[] = [
    {
        field: 'EmployeeID', label: 'EmployeeID', type: 'number'
    },
    { field: 'FirstName', label: 'FirstName', type: 'string' },
    { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
    { field: 'Title', label: 'Title', type: 'string' },
    { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
    { field: 'Country', label: 'Country', type: 'string' },
    { field: 'City', label: 'City', type: 'string' }
];
let importRules: RuleModel = {
    'condition': 'and',
    'rules': [{
        'label': 'EmployeeID',
        'field': 'EmployeeID',
        'type': 'number',
        'operator': 'equal',
        'value': 1001
    },
    {
        'label': 'Title',
        'field': 'Title',
        'type': 'string',
        'operator': 'equal',
        'value': 'Sales Manager'
    }]
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
    width: '70%',
    dataSource: data,
    columns: columnData,
    rule: importRules,
});
qryBldrObj.appendTo('#querybuilder');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-querybuilder/styles/material.css" rel="stylesheet" />
    <link href="styles.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='loader'>LOADING....</div>
    <div id='container'>
        <div id='querybuilder'></div>
         <div id='property'> </div>
    </div>
</body>
</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-query-builder {
  margin: 0 auto;
}

Web API

You can use WebApiAdaptor to bind query builder with Web API created using OData endpoint.

Copied to clipboard
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

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

let columnData: ColumnsModel[] = [
    {
        field: 'EmployeeID', label: 'EmployeeID', type: 'number'
    },
    { field: 'FirstName', label: 'FirstName', type: 'string' },
    { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
    { field: 'Title', label: 'Title', type: 'string' },
    { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
    { field: 'Country', label: 'Country', type: 'string' },
    { field: 'City', label: 'City', type: 'string' }
];
let importRules: RuleModel = {
    'condition': 'and',
    'rules': [{
        'label': 'EmployeeID',
        'field': 'EmployeeID',
        'type': 'number',
        'operator': 'equal',
        'value': 1001
    },
    {
        'label': 'Title',
        'field': 'Title',
        'type': 'string',
        'operator': 'equal',
        'value': 'Sales Manager'
    }]
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
    width: '70%',
    dataSource: data,
    columns: columnData,
    rule: importRules,
});
qryBldrObj.appendTo('#querybuilder');

Support with Data Manager

You can use the created conditions in DataManager through the getPredicate method, which results the filtered records.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
import { Button } from '@syncfusion/ej2-buttons';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { compile } from '@syncfusion/ej2-base';

let hardwareData: Object[]  = [{
  'TaskID': 1,
  'Name': 'Lenovo Yoga',
  'Category': 'Laptop',
  'SerialNo': 'CB27932009',
  'InvoiceNo': 'INV-2878',
  'Status': 'Assigned'
  },
  {
  'TaskID': 2,
  'Name': 'Acer Aspire',
  'Category': 'Others',
  'SerialNo': 'CB35728290',
  'InvoiceNo': 'INV-3456',
  'Status': 'In-repair'
  },
  {
  'TaskID': 3,
  'Name': 'Apple MacBook',
  'Category': 'Laptop',
  'SerialNo': 'CB35628728',
  'InvoiceNo': 'INV-2763',
  'Status': 'In-repair'
  }];

let columnData: ColumnsModel[] = [
    { field: 'TaskID', label: 'Task ID', type: 'number' },
    { field: 'Name', label: 'Name', type: 'string' },
    { field: 'Category', label: 'Category', type: 'string' },
    { field: 'SerialNo', label: 'Serial No', type: 'string' },
    { field: 'InvoiceNo', label: 'Invoice No', type: 'string' },
    { field: 'Status', label: 'Status', type: 'string' }
];
let importRules: RuleModel = {
    'condition': 'and',
    'rules': [{
        'label': 'Task ID',
        'field': 'TaskID',
        'type': 'number',
        'operator': 'equal',
        'value': 1
    }]
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
    width: '70%',
    dataSource: hardwareData,
    columns: columnData,
    rule: importRules,
});
qryBldrObj.appendTo('#querybuilder');
let template: string = '<tr><td>${TaskID}</td><td>${Category}</td><td>${Status}</td></tr>';
let dataManagerQuery:Query;
let button: Button = new Button({cssClass: `e-primary`, content:'get data'}, '#getdata');
let validRule: RuleModel = qryBldrObj.getValidRules(qryBldrObj.rule);
document.getElementById('getdata').onclick = (): void => {
    let compiledFunction: Function = compile(template);
   document.getElementById('datatable').style.display = 'block';
    dataManagerQuery = new Query().select(['TaskID', 'Category', 'Status']).where(qryBldrObj.getPredicate(validRule)).take(8);
     let result: Object[] = new DataManager(hardwareData).executeLocal(dataManagerQuery);
     let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));
     if (table.querySelectorAll('tbody')[1]) {
         table.querySelectorAll('tbody')[1].remove();
     }
     result.forEach((data: Object) => {
     table.appendChild(compiledFunction(data)[0]);
});
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-querybuilder/styles/material.css" rel="stylesheet" />
    <link href="styles.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='loader'>LOADING....</div>
    <div id='container'>
        <div id='querybuilder'></div>
         <div class='e-qb-button'> 
             <button id='getdata' class='e-btn e-primary' >get Data</button>
         </div>
         <div id='Grid'></div>
         <table id='datatable' class='e-table' style='display:none'>
             <thead>
                 <tr><th>TaskID</th><th>Category</th><th>Status</th></tr>
             </thead>
             <tbody>
             </tbody>    
         </table>        
     </div>
    </div>
</body>
</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-qb-button {
  margin: 2% 0 0 15%;
}

.e-qb-button button {
  margin-right: 20px;
  margin-bottom: 20px;
}

.e-query-builder {
  margin: 0 auto;
}

#datatable {
  margin-left: 15%;
}

#datatable.e-table {
  border: solid 1px #e0e0e0;
  border-collapse: collapse;
  font-family: Roboto;
}

#datatable.e-table td, #datatable.e-table th {
  border: solid #e0e0e0;
  border-width: 1px 0 0;
  display: table-cell;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  padding: 8px 21px;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
}

Complex Data Binding

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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { QueryBuilder , RuleModel, RuleChangeEventArgs, ColumnsModel} from '@syncfusion/ej2-querybuilder';
import { addClass, removeClass, getComponent } from '@syncfusion/ej2-base';
import { RadioButton, ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { MultiSelect, CheckBoxSelection } from '@syncfusion/ej2-dropdowns';

let importRules: RuleModel = {
condition: 'and',
rules: [{
    label: 'ID',
    field: 'Employee.ID',
    type: 'string',
    operator: 'equal',
    value: 0
},
{
    label: 'Last Name',
    field: 'Name.LastName',
    type: 'string',
    operator: 'contains',
    value: 'malan'
},
{
    condition: 'or',
    rules: [{
        label: 'City',
        field: 'Country.State.City',
        operator: 'startswith',
        type: 'string',
        value: 'U'
    },{
        label: 'Region',
        field: 'Country.Region',
        operator: 'endswith',
        type: 'string',
        value: 'c'
    },{
        label: 'Name',
        field: 'Country.Name',
        operator: 'isnotempty'
    }]
}
]};

let columns: ColumnsModel[] = [
{field: 'Employee', label: 'Employee', columns: [
    { 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'}
]},
{field: 'Name', label: 'Name', columns: [
    { field: 'FirstName', label: 'First Name', type: 'string'},
    { field: 'LastName', label: 'Last Name', type: 'string'}
]},
{field: 'Country', label: 'Country', columns : [
    { 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'}
]}
];

let qryBldrObj: QueryBuilder = new QueryBuilder({
separator: '.',
columns: columns,
rule: importRules,
enableNotCondition: true
});
qryBldrObj.appendTo('#querybuilder');
document.getElementById('rule').onclick = (e: Event) => {
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)");
}

document.getElementById('sql').onclick = (e: Event) => {
qryBldrObj.setRules(importRules);
}

document.getElementById('reset').onclick = (e: Event) => {
qryBldrObj.reset();
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-querybuilder/styles/material.css" rel="stylesheet" />
    <link href="styles.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='loader'>LOADING....</div>
    <div id='container'>
        <div>
            <table>
                <tr>
                    <td> <button id="reset" class="e-control e-danger e-btn e-small">Reset</button> </td>
                    <td> <button id="rule" class="e-control e-success e-btn e-small">SetSqlRules</button> </td>
                    <td> <button id="sql" class="e-control e-success e-btn e-small">SetRules</button> </td>
                </tr>
            </table>
        </div>
        <div class="col-lg-8 control-section">
            <div class="querybuilder-main">
                <div id="querybuilder">
                </div>
            </div>
        </div>
	<style type="text/css">
    .e-query-builder .e-group-body .e-horizontal-mode .e-rule-sub-filter{
        display: inline-block;
    }
    .e-query-builder .e-group-body .e-rule-container .e-rule-sub-filter{
        padding: 12px 0 12px 12px;
        width: auto;
    }
	</style>
</body>
</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-query-builder {
  margin: 0 auto;
}
Previous
Next