Filter menu in Vue Treegrid component
16 Mar 20234 minutes to read
You can enable filter menu by setting the filterSettings.type
as Menu
. The filter menu UI will be rendered based on its column type, which allows you to filter data.
You can filter the records with different operators.
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :allowFiltering='true' height='275px' :filterSettings='filterSettings'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='75' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='120'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" 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,
filterSettings: {
type: 'Menu'
}
};
},
provide: {
treegrid: [ Filter ]
}
}
</script>
allowFiltering
must be set as true to enable filter menu.- Setting
columns.allowFiltering
as false will prevent filter menu rendering for a particular column.
Enable different filter dialog for a column
You can use both Menu
and Excel
filter in a same TreeGrid. To do so, set the
column.filter.type
as Menu
or Excel
.
In the following sample menu filter is enabled by default and Excel filter is enabled for the Task Name column using the
column.filter.type
.
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :allowFiltering='true' height='273px' :filterSettings='filterOptions'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='160' :filter='filter'></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: {
type: 'Menu'
},
filter: {
type : 'Excel';
}
};
},
provide: {
treegrid: [ Filter ]
}
}
</script>