Filtering in Vue Query builder component
11 Jun 202417 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, anddeleteRulesmethods to create/delete conditions. - Use
addGroups, anddeleteGroupsmethods to create/delete groups.
Install Syncfusion Buttons packages using below command.
npm install @syncfusion/ej2-vue-buttons --save<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" id="querybuilder" ref="querybuilder" :dataSource="dataSource" :rule="importRules" :showButtons="showButtons">
<e-columns>
<e-column field='EmployeeID' label='Employee ID' type='number' />
<e-column field='FirstName' label='First Name' type='string' />
<e-column field='TitleOfCourtesy' label='Title Of Courtesy' type='boolean' :values="values"/>
<e-column field='Title' label='Title' type='string' />
<e-column field='HireDate' label='Hire Date' type='date' format='dd/MM/yyyy' />
<e-column field='Country' label='Country' type='string' />
<e-column field='City' label='City' type='string' />
</e-columns>
</ejs-querybuilder>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click="addRule">Add Rule</ejs-button>
<ejs-button cssClass="e-qbr-button" :isPrimary="true" v-on:click="addGroup">Add Group</ejs-button>
<ejs-button cssClass="e-qbr-button" :isPrimary="true" v-on:click="deleteGroup">Delete Group</ejs-button>
</div>
</div>
</template>
<script setup>
import { QueryBuilderComponent as EjsQuerybuilder, ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { ref } from "vue";
const querybuilder = ref(null);
const values = ['Mr.', 'Mrs.'];
const dataSource = employeeData;
const importRules = {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}
]
};
const addRule = function() {
querybuilder.value.ej2Instances.addRules([{'label': 'City','field': 'City','type': 'string','operator': 'equal','value': 'US'}], 'group0');
};
const addGroup = function() {
querybuilder.value.ej2Instances.addGroups([{'condition': 'and','rules': [{'label': 'First Name','field': 'FirstName','type': 'string','operator': 'startswith','value': 'v' }]}], 'group0');
};
const deleteGroup = function() {
querybuilder.value.ej2Instances.deleteGroups(['group1']);
};
var employeeData = [{
'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'
}];
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
.e-query-builder {
margin: 0 auto;
}
.e-qb-button {
margin: 2% 1% 0 15%;
}
.e-qbr-button {
margin: 2% 1% 0 1%;
}
#datatable {
margin-left: 15%;
margin-top: 2%;
}
#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;
}
</style><template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" id="querybuilder" ref="querybuilder" :dataSource="dataSource" :rule="importRules" :showButtons="showButtons">
<e-columns>
<e-column field='EmployeeID' label='Employee ID' type='number' />
<e-column field='FirstName' label='First Name' type='string' />
<e-column field='TitleOfCourtesy' label='Title Of Courtesy' type='boolean' :values="values"/>
<e-column field='Title' label='Title' type='string' />
<e-column field='HireDate' label='Hire Date' type='date' format='dd/MM/yyyy' />
<e-column field='Country' label='Country' type='string' />
<e-column field='City' label='City' type='string' />
</e-columns>
</ejs-querybuilder>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click="addRule">Add Rule</ejs-button>
<ejs-button cssClass="e-qbr-button" :isPrimary="true" v-on:click="addGroup">Add Group</ejs-button>
<ejs-button cssClass="e-qbr-button" :isPrimary="true" v-on:click="deleteGroup">Delete Group</ejs-button>
</div>
</div>
</template>
<script>
import { QueryBuilderComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
export default {
name: "App",
components: {
"ejs-querybuilder":QueryBuilderComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
"ejs-button":ButtonComponent,
},
data: function() {
return {
dataSource: employeeData,
values: ['Mr.', 'Mrs.'],
showButtons:{ruleDelete: true, groupInsert: true, groupDelete: true},
importRules: {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}]
}
};
},
methods: {
addRule: function() {
this.$refs.querybuilder.ej2Instances.addRules([{'label': 'City','field': 'City','type': 'string','operator': 'equal','value': 'US'}], 'group0');
},
addGroup: function() {
this.$refs.querybuilder.ej2Instances.addGroups([{'condition': 'and','rules': [{'label': 'First Name','field': 'FirstName','type': 'string','operator': 'startswith','value': 'v' }]}], 'group0');
},
deleteGroup: function() {
this.$refs.querybuilder.ej2Instances.deleteGroups(['group1']);
}
}
}
var employeeData = [{
'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'
}];
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
.e-query-builder {
margin: 0 auto;
}
.e-qb-button {
margin: 2% 1% 0 15%;
}
.e-qbr-button {
margin: 2% 1% 0 1%;
}
#datatable {
margin-left: 15%;
margin-top: 2%;
}
#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;
}
</style>