Search results

Filtering in JavaScript QueryBuilder control

13 May 2021 / 2 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.

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';

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']);
}
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/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="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='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>
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;
}

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