Filtering in Vue Gantt component
16 Mar 202324 minutes to read
Filtering allows you to view specific or related records based on filter criteria. This can be done in the Gantt Component by using the filter menu support and toolbar search support. To enable filtering in the Gantt Component, set the allowFiltering to true. Menu filtering support can be configured using the filterSettings property and toolbar searching can be configured using the searchSettings property.
To use the filter, inject the Filter module in the provide section.
Filter hierarchy modes
The Gantt supports a set of filtering modes with the filterSettings.hierarchyMode property. The following are the types of filter hierarchy modes available in the Gantt component:
-
Parent: This is the default filter hierarchy mode in Gantt. The filtered records are displayed with its parent records. If the filtered records do not have any parent record, then only the filtered records will be displayed. -
Child: Displays the filtered records with its child record. If the filtered records do not have any child record, then only the filtered records will be displayed. -
Both: Displays the filtered records with its both parent and child records. If the filtered records do not have any parent and child records, then only the filtered records will be displayed. -
None: Displays only the filtered records.
<template>
<div>
<table>
<tr>
<td style="width: 70%">
<ejs-dropdownlist id="filter-type" value='Parent' :dataSource="dataSource" :fields = "fields" :change ="change"> Filter Hierarchy </ejs-dropdownlist>
</td>
</tr>
</table>
<br> <br>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height="height" :columns="columns" :splitterSettings = "splitterSettings" :allowFiltering= "true"></ejs-gantt>
</div>
</template>
<script>
import Vue from "vue";
import { GanttPlugin, Filter, Toolbar } from "@syncfusion/ej2-vue-gantt";
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { projectNewData } from './data-source.js';
Vue.use(GanttPlugin);
Vue.use(DropDownListPlugin);
export default {
data: function() {
return{
data: projectNewData,
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
],
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings:{
columnIndex:3
},
dataSource: [
{ id: 'Parent', mode: 'Parent' },
{ id: 'Child', mode: 'Child' },
{ id: 'Both', mode: 'Both' },
{ id: 'None', mode: 'None' },
],
fields: { text: 'mode', value: 'id' },
};
},
provide: {
gantt: [ Filter ]
},
methods: {
change: function (e) {
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
var mode = e.value;
ganttChart.filterSettings.hierarchyMode = mode;
ganttChart.clearFiltering();
}
},
};
</script>Initial filter
To apply the filter at initial rendering, set the filter to predicate object in the filterSettings.columns property.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns="columns" :splitterSettings = "splitterSettings" :filterSettings="filterSettings" :allowFiltering= "true"></ejs-gantt>
</div>
</template>
<script>
import Vue from "vue";
import { GanttPlugin, Filter } from "@syncfusion/ej2-vue-gantt";
Vue.use(GanttPlugin);
export default {
data: function() {
return{
data: [
{
TaskID: 1,
TaskName: 'Project initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('04/02/2019'), Duration: 0,Progress: 50, resources: [1]},
{TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',Progress: 50, resources: [2, 3, 5]},
{TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),Duration: 3, Predecessor: '4', Progress: 50, resources: [4]},
{TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),Duration: 3, Predecessor: '6', resources: [4, 8],Progress: 50},
{TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),Duration: 0, Predecessor: '7', resources: [12, 5]
}
]
}];
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
],
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings:{
columnIndex:3
},
filterSettings: {
columns: [{ field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },
{ field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 2 }]
},
};
},
provide: {
gantt: [ 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.operatorvalue isequal.
Diacritics
By default, the Gantt component ignores the diacritic characters while filtering. To include diacritic characters, set the filterSettings.ignoreAccent to true.
In the following sample, type Project in the TaskName column to filter diacritic characters.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns="columns" :splitterSettings = "splitterSettings" :filterSettings="filterSettings" :allowFiltering= "true"></ejs-gantt>
</div>
</template>
<script>
import Vue from "vue";
import { GanttPlugin, Filter } from "@syncfusion/ej2-vue-gantt";
import { projectNewData } from './data-source.js';
Vue.use(GanttPlugin);
export default {
data: function() {
return{
data: [
{
TaskID: 1,
TaskName: 'Projéct initiàtion',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{TaskID: 2, TaskName: 'Identify site locàtion', StartDate: new Date('04/02/2019'), Duration: 0,Progress: 50, resources: [1]},
{TaskID: 3, TaskName: 'Perförm soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',Progress: 50, resources: [2, 3, 5]},
{TaskID: 4, TaskName: 'Soil tëst appröval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{TaskID: 6, TaskName: 'Develöp floor plan for estimàtion', StartDate: new Date('04/04/2019'),Duration: 3, Predecessor: '4', Progress: 50, resources: [4]},
{TaskID: 7, TaskName: 'List matërials', StartDate: new Date('04/04/2019'),Duration: 3, Predecessor: '6', resources: [4, 8],Progress: 50},
{TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),Duration: 0, Predecessor: '7', resources: [12, 5]
}
]
}],
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
],
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings:{
columnIndex:3
},
filterSettings: {
ignoreAccent:true
},
};
},
provide: {
gantt: [ Filter ]
}
};
</script>Filtering a specific column by method
You can filter the columns dynamically by using the filterByColumn method.
<template>
<div>
<ejs-button id="filterRecord" cssClass="e-info" v-on:click.native="filter">Filter</ejs-button>
<br><br><br>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :splitterSettings = "splitterSettings" :columns="columns" :allowFiltering= "true"></ejs-gantt>
</div>
</template>
<script>
import Vue from "vue";
import { GanttPlugin, Filter } from "@syncfusion/ej2-vue-gantt";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { projectNewData } from './data-source.js';
Vue.use(GanttPlugin);
Vue.use(ButtonPlugin);
export default {
data: function() {
return{
data: [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
],
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
],
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings:{
columnIndex:3
},
};
},
provide: {
gantt: [ Filter ]
},
methods: {
filter: function(e){
var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
ganttObj.filterByColumn('TaskName','startswith','Iden','and');
}
}
};
</script>Clear filtered columns
You can clear all the filtering condition done in the Gantt component by using the clearFiltering method.
The following code snippet explains the above behavior.
<template>
<div>
<ejs-button id="ClearfilterRecord" cssClass="e-info" v-on:click.native="filter">Clear Filter</ejs-button>
<br><br><br>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns="columns" :splitterSettings = "splitterSettings" :filterSettings="filterSettings" :allowFiltering= "true"></ejs-gantt>
</div>
</template>
<script>
import Vue from "vue";
import { GanttPlugin, Filter } from "@syncfusion/ej2-vue-gantt";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { projectNewData } from './data-source.js';
Vue.use(GanttPlugin);
Vue.use(ButtonPlugin);
export default {
data: function() {
return{
data: [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
],
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
],
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings:{
columnIndex:3
},
filterSettings: {
columns: [{ field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },
{ field: 'Progress', matchCase: false, operator: 'equal', predicate: 'and', value: 50 }]
}
};
},
provide: {
gantt: [ Filter ]
},
methods: {
filter: function(e){
var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
ganttObj.clearFiltering();
}
}
};
</script>Custom component in filter menu
The column.filter.ui is used to add custom filter components to a particular column.
To implement a custom filter UI, define the following functions:
-
create: Creates a custom component. -
write: Wire events for a custom component. -
read: Read the filter value from the custom component.
In the following sample, the dropdown is used as a custom component in the TaskName column.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns="columns" :splitterSettings = "splitterSettings" :filterSettings="filterSettings" :allowFiltering= true>
<e-columns>
<e-column field='TaskID' headerText='Task ID' textAlign='Left' width='100'></e-column>
<e-column field='TaskName' :filter= 'filter' headerText='Task Name' width='150'></e-column>
<e-column field='StartDate' headerText='Start Date' width='150'></e-column>
<e-column field='Duration' headerText='Duration' width='150'></e-column>
<e-column field='Progress' headerText='Progress' width='150'></e-column>
</e-columns>
</ejs-gantt>
</div>
</template>
<script>
import Vue from "vue";
import { GanttPlugin, Filter, } from "@syncfusion/ej2-vue-gantt";
import { projectNewData } from './data-source.js';
Vue.use(GanttPlugin);
import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';
Vue.use(DropDownListPlugin);
import { DataManager } from "@syncfusion/ej2-data";
import {createElement} from "@syncfusion/ej2-base";
export default {
data: function() {
return{
data: [
{
TaskID: 1,
TaskName: 'Project initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('04/02/2019'), Duration: 0,Progress: 50, resources: [1]},
{TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',Progress: 50, resources: [2, 3, 5]},
{TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),Duration: 3, Predecessor: '4', Progress: 50, resources: [4]},
{TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),Duration: 3, Predecessor: '6', resources: [4, 8],Progress: 50},
{TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),Duration: 0, Predecessor: '7', resources: [12, 5]}
]
}],
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
],
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
filter: {
ui: {
create: function (args) {
let db = new DataManager(data);
let flValInput = createElement('input', { className: 'flm-input' });
args.target.appendChild(flValInput);
dropInstance = new DropDownList({
dataSource: new DataManager(data),
fields: { text: 'TaskName', value: 'TaskName' },
placeholder: 'Select a value',
popupHeight: '200px'
});
dropInstance.appendTo(flValInput);
},
write: function (args) {
dropInstance.value = args.filteredValue;
},
read: function (args) {
args.fltrObj.filterByColumn(args.column.field, args.operator, dropInstance.value);
}
}
},
splitterSettings:{
columnIndex:3
},
filterSettings: {
type:'Menu'
},
};
},
provide: {
gantt: [ Filter]
}
};
</script>