Filtering in Vue Treegrid component
24 Mar 202315 minutes to read
Filtering allows you to view specific or related records based on filter criteria. To enable filtering in the TreeGrid, set the allowFiltering
to true. Filtering options can be configured through filterSettings
.
To use filter, inject the Filter
module in the treegrid.
To get start quickly with filtering options, you can check on this video:
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :allowFiltering='true' height='275px'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='160'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, Filter } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
Vue.use(TreeGridPlugin);
export default {
data () {
return {
data: sampleData,
};
},
provide: {
treegrid: [ Filter ]
}
}
</script>
- You can apply and clear filtering by using
filterByColumn
andclearFiltering
methods.- To disable filtering for a particular column, set
columns.allowFiltering
to false.
Filter hierarchy modes
TreeGrid provides support for a set of filtering modes with filterSettings.filterHierarchyMode
property.
The below are the type of filter mode available in TreeGrid.
-
Parent : This is the default filter hierarchy mode in TreeGrid. The filtered records are displayed with its parent records, if the filtered records not have any parent record then the filtered records only displayed.
-
Child : The filtered records are displayed with its child record, if the filtered records not have any child record then the filtered records only displayed.
-
Both : The filtered records are displayed with its both parent and child record, if the filtered records not have any parent and child record then the filtered records only displayed.
-
None : The filtered records are only displayed.
<template>
<div id="app">
<div style="padding-top: 7px; display: inline-block">Hierarchy Mode</div>
<div style="display: inline-block; width: 150px">
<ejs-dropdownlist id='mode' :dataSource='ddldata' :fields='fields' :value='value' :popupHeight='height' :change='change'></ejs-dropdownlist>
</div>
<ejs-treegrid ref='treegrid' :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :allowFiltering='true' height='225px'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='75' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='180'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, Filter, TreeGridComponent } from "@syncfusion/ej2-vue-treegrid";
import { DropDownListPlugin, ChangeEventArgs } from '@syncfusion/ej2-vue-dropdowns';
import { sampleData } from "./datasource.js";
Vue.use(TreeGridPlugin);
Vue.use(DropDownListPlugin);
export default {
data () {
return {
data: sampleData,
height: '220px',
ddldata : [{ id: 'Parent', mode: 'Parent' },
{ id: 'Child', mode: 'Child' },
{ id: 'Both', mode: 'Both' },
{ id: 'None', mode: 'None' }
],
fields: { text: 'mode', value: 'id' },
value: 'Parent'
};
},
provide: {
treegrid: [ Filter ]
},
methods: {
change: function (e: ChangeEventArgs) {
let mode: any = e.value;
this.$refs.treegrid.ej2Instances.filterSettings.hierarchyMode = mode;
this.$refs.treegrid.clearFiltering();
}
}
}
</script>
Initial filter
To apply the filter at initial rendering, set the filter predicate
object in
filterSettings.columns
.
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :allowFiltering='true' :filterSettings='filterOptions' height='275px'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='75' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='180'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, Filter } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
Vue.use(TreeGridPlugin);
export default {
data () {
return {
data: sampleData,
filterOptions: {
columns: [{ field: 'taskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'plan' },
{ field: 'duration', matchCase: false, operator: 'equal', predicate: 'and', value: 5 }]
}
};
},
provide: {
treegrid: [ Filter ]
}
}
</script>
Filter operators
The filter operator for a column can be defined in the filterSettings.columns.operator
property.
The available operators and its supported data types are:
Operator | 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 | Boolean | Date |
notequal | Checks for values not equal to the specified value. | String | Number | Boolean | Date |
greaterthan | Checks whether the value is greater than the specified value. | Number | Date |
greaterthanorequal | Checks whether a value is greater than or equal to the specified value. | Number | Date |
lessthan | Checks whether the value is less than the specified value. | Number | Date |
lessthanorequal | Checks whether the value is less than or equal to the specified value. | Number | Date |
By default, the
filterSettings.columns.operator
value isequal
.
Change default filter operator
You can change the default filter operator by extending filterModule.filterOperators
property in dataBound
event. In the following sample, we have changed the default operator for string typed columns as contains
from startsWith
.
<template>
<div id="app">
<ejs-treegrid ref='treegrid':dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :allowFiltering='true' height='275px' :dataBound='dataBound'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='75' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='180'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, Filter } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
Vue.use(TreeGridPlugin);
export default {
data () {
return {
data: sampleData,
};
},
provide: {
treegrid: [Filter]
},
methods: {
dataBound(args){
this.$refs.treegrid.ej2Instances.grid.filterModule.filterOperators.startsWith="contains"
}
}
}
</script>
Diacritics
By default, treegrid ignores diacritic characters while filtering. To include diacritic characters, set the filterSettings.ignoreAccent
as true
.
In the following sample, type aero in Name
column to filter diacritic characters.
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='Children' :treeColumnIndex='0' :allowFiltering='true' height='275px' :filterSettings='filterSettings'>
<e-columns>
<e-column field='EmpID' headerText='Employee ID' width='90' textAlign='Right'></e-column>
<e-column field='Name' headerText='Name' width='110'></e-column>
<e-column field='DOB' headerText='DOB' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='Country' width='65'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, Filter } from "@syncfusion/ej2-vue-treegrid";
import { diacritics } from "./datasource.js";
Vue.use(TreeGridPlugin),
export default {
data () {
return {
data: diacritics,
filterSettings: {
ignoreAccent: true
}
};
},
provide: {
treegrid: [Filter]
}
}
</script>