Filtering in EJ2 TypeScript Query builder control
27 Apr 20238 minutes to read
Query Builder allows you to create or delete conditions and groups. You can use showButtons
to enable/disable these buttons.
You can create or delete conditions by interacting through the user interface and methods.
- Use the
addRules
, anddeleteRules
methods to create/delete conditions. - Use
addGroups
, anddeleteGroups
methods to create/delete groups.
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
import { Button } from '@syncfusion/ej2-buttons';
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: 'Employee ID', 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' }
];
let importRules: RuleModel = {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'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,
showButtons: { ruleDelete: true , groupInsert: true, groupDelete: true }
rule: importRules
});
qryBldrObj.appendTo('#querybuilder');
let button: Button = new Button({cssClass: `e-primary`, content:'Add Rule' }, '#qbaddrule');
button = new Button({cssClass: `e-primary`, content:'Add Group'}, '#qbaddgroup');
button = new Button({cssClass: `e-primary`, content:'Delete Group' }, '#qbdeletegroup');
document.getElementById('qbaddrule').onclick = (): void => {
qryBldrObj.addRules([{'label': 'Employee ID','field': 'EmployeeID','type': 'number','operator': 'equal','value': '1091'}], 'group0'});
}
document.getElementById('qbaddgroup').onclick = (): void => {
qryBldrObj.addGroups([{'condition': 'and','rules': [{'label': 'First Name','field': 'FirstName','type': 'string','operator': 'startswith','value': 'v' }]}], 'group0');
}
document.getElementById('qbdeletegroup').onclick = (): void => {
qryBldrObj.deleteGroups(['group1']);
}
<!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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id='querybuilder'></div>
<div class='e-qb-button'>
<button id='qbaddrule' class='e-btn e-primary'> Add Rule </button>
<button id='qbaddgroup' class='e-btn e-primary'> Add Group </button>
<button id='qbdeletegroup' class='e-btn e-primary'>Delete Group </button>
</div>
</div>
</body>
</html>