Column menu in Vue Treegrid component
11 Jun 202417 minutes to read
The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the showColumnMenu
property as true.
By default, column menu is enabled for all columns and you can disable column menu for a particular column by defining the showColumnMenu
as false in columns
property.
To use the column menu, inject the ColumnMenu
module in the treegrid.
The default items are displayed in following table.
Item | Description |
---|---|
SortAscending |
Sort the current column in ascending order. |
SortDescending |
Sort the current column in descending order. |
AutoFit |
Auto fit the current column. |
AutoFitAll |
Auto fit all columns. |
Filter |
Show the filter option as given in filterSettings.type
|
<template>
<div id="app">
<ejs-treegrid :dataSource="data" :treeColumnIndex='1' :allowPaging='true' :showColumnMenu='true' childMapping='subtasks'
:allowFiltering='true' :filterSettings='filterSettings' :allowResizing='true' :pageSettings='pageSettings'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' width=180></e-column>
<e-column field='startDate' headerText=' Start Date' textAlign='Right' :showColumnMenu='false' format='yMd' type='date' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script setup>
import { provide } from "vue";
import { TreeGridComponent as EjsTreegrid, Sort, Resize, ColumnMenu, Page, Filter, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
const data = sampleData;
const filterSettings = { type: "Menu" };
const pageSettings = { pageCount: 4, pageSize: 10 };
provide('treegrid', [Sort, Resize, ColumnMenu, Page, Filter]);
</script>
<template>
<div id="app">
<ejs-treegrid :dataSource="data" :treeColumnIndex='1' :allowPaging='true' :showColumnMenu='true' childMapping='subtasks'
:allowFiltering='true' :filterSettings='filterSettings' :allowResizing='true' :pageSettings='pageSettings'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' width=180></e-column>
<e-column field='startDate' headerText=' Start Date' textAlign='Right' :showColumnMenu='false' format='yMd' type='date' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, Sort, Resize, ColumnMenu, Page, Filter, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data() {
return {
data: sampleData,
filterSettings: { type: "Menu" },
pageSettings: { pageCount: 4, pageSize: 10 }
};
},
provide: {
treegrid: [Sort, Resize, ColumnMenu, Page, Filter]
}
}
</script>
Custom column menu item
The custom column menu items can be added to the column menu by defining the columnMenuItems
as a collection of the MenuItemModel
.
The action for custom column menu items can be performed using columnMenuClick
event.
In the below example, clear sorting action was performed through columnMenuItems
by using clearSorting
method of the Tree Grid.
<template>
<div id="app">
<ejs-treegrid ref='treegrid':dataSource="data" :treeColumnIndex='1' :allowPaging='true' :allowSorting='true' :sortSettings='sortSettings' :showColumnMenu='true' childMapping='subtasks' :columnMenuItems='columnMenuItems' :columnMenuClick='columnMenuClick'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' width=180></e-column>
<e-column field='startDate' headerText=' Start Date' textAlign='Right' format='yMd' type='date' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { TreeGridComponent as EjsTreegrid, Sort, ColumnMenu, Page, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
const treegrid = ref(null);
const data = sampleData;
const columnMenuItems = [{text:'Clear Sorting', id:'clearsorting'}];
const sortSettings = {columns:[{direction: "Ascending", field: "taskID"}]};
const columnMenuClick = function(args) {
if(args.item.id === 'clearsorting'){
treegrid.value.clearSorting();
}
};
provide('treegrid', [Sort, ColumnMenu, Page]);
</script>
<template>
<div id="app">
<ejs-treegrid ref='treegrid':dataSource="data" :treeColumnIndex='1' :allowPaging='true' :allowSorting='true' :sortSettings='sortSettings' :showColumnMenu='true' childMapping='subtasks' :columnMenuItems='columnMenuItems' :columnMenuClick='columnMenuClick'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' width=180></e-column>
<e-column field='startDate' headerText=' Start Date' textAlign='Right' format='yMd' type='date' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, Sort, ColumnMenu, Page, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data() {
return {
data: sampleData,
columnMenuItems: [{text:'Clear Sorting', id:'clearsorting'}],
sortSettings: {columns:[{direction: "Ascending", field: "taskID"}]}
};
},
provide: {
treegrid: [Sort, ColumnMenu, Page]
},
methods: {
columnMenuClick: function(args) {
if(args.item.id === 'clearsorting'){
this.$refs.treegrid.clearSorting();
}
}
},
}
</script>
Customize menu items for particular columns
It is possible to customize specific items from the column menu for particular columns
using columnMenuOpen
event. columnMenuOpen
event can be utilized to determine which items to customize in column menu.
The following example shows how to hide the built-in Filter menu item when the column menu is opened for the taskName column, while allowing it to remain visible for all other columns.
<template>
<div id="app">
<ejs-treegrid ref='treegrid':dataSource="data" :treeColumnIndex='1' :allowPaging='true' :allowSorting='true' :showColumnMenu='true' childMapping='subtasks' :columnMenuOpen='columnMenuOpen' :allowFiltering='true' :filterSettings='filterSettings'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' width=180></e-column>
<e-column field='startDate' headerText=' Start Date' textAlign='Right' format='yMd' type='date' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script setup>
import { provide } from "vue";
import { TreeGridComponent as EjsTreegrid, Sort, ColumnMenu, Page, Filter, ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
const data = sampleData;
const filterSettings = { type: "Menu" };
provide('treegrid', [Sort, ColumnMenu, Page, Filter]);
const columnMenuOpen = function (args) {
for (let item of args.items) {
if (item.text === 'Filter' && args.column.field === 'taskName') {
item.hide = true;
} else {
item.hide = false;
}
}
};
</script>
<template>
<div id="app">
<ejs-treegrid ref='treegrid':dataSource="data" :treeColumnIndex='1' :allowPaging='true' :allowSorting='true' :showColumnMenu='true' childMapping='subtasks' :columnMenuOpen='columnMenuOpen' :allowFiltering='true' :filterSettings='filterSettings'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' width=180></e-column>
<e-column field='startDate' headerText=' Start Date' textAlign='Right' format='yMd' type='date' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, Sort, ColumnMenu, Page, Filter, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data() {
return {
data: sampleData,
filterSettings: { type: "Menu" },
};
},
provide: {
treegrid: [Sort, ColumnMenu, Page, Filter]
},
methods: {
columnMenuOpen: function (args) {
for (let item of args.items) {
if (item.text === 'Filter' && args.column.field === 'taskName') {
item.hide = true;
} else {
item.hide = false;
}
}
}
},
}
</script>