Column Menu in Vue Gantt Chart Component

18 Nov 201824 minutes to read

The column menu provides options for features like sorting, filtering, and autofit. A menu with the integrated features will appear when you click the multiple icon in a column. To enable the column menu, set the showColumnMenu property to true.

The default items are displayed in the following table:

Item	Description
SortAscending	Sort the current column in ascending order.
SortDescending	Sort the current column in descending order.
AutoFit	Autofit the current column.
AutoFitAll	Autofit all columns.
Filter	Show the filter option as given in filterSettings.type.

Composition API (~/src/App.vue)

<template>
  <div>
    <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
      :columns="columns" :allowFiltering='true' :splitterSettings="splitterSettings" :showColumnMenu='true'
      :allowSorting='true'></ejs-gantt>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { GanttComponent as EjsGantt, Sort, Filter, ColumnMenu } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const taskFields = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  duration: 'Duration',
  progress: 'Progress',
  child: 'subtasks',
};
const height = '450px';
const splitterSettings = {
  position: '100%'
};
const columns = [
  { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
  { field: 'TaskName', headerText: 'Task Name', width: '150' },
  { field: 'StartDate', headerText: 'Start Date', width: '150' },
  { field: 'Duration', headerText: 'Duration', width: '150' },
  { field: 'Progress', headerText: 'Progress', width: '150' },
];
provide('gantt', [Sort, Filter, ColumnMenu]);
</script>

Options API (~/src/App.vue)

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns = "columns" :allowFiltering = 'true' :splitterSettings = "splitterSettings" :showColumnMenu = 'true' :allowSorting = 'true'></ejs-gantt>
    </div>
</template>
<script>
import { GanttComponent, Sort, Filter, ColumnMenu } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
         data: editingData,
         taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            height:'450px',
            splitterSettings:{
            position: '100%'
          },
        columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'Duration', headerText: 'Duration', width: '150' },
            { field: 'Progress', headerText: 'Progress', width: '150' },
        ],
      };
  },
    provide: {
      gantt: [ Sort, Filter, ColumnMenu ]
  }
};
</script>

You can disable the column menu for a specific column by setting the columns.showColumnMenu property to false.

Column menu events

When using the column menu, the Gantt Chart component triggers the following two events:

1. The columnMenuOpen event triggers before the column menu opens.
2. The columnMenuClick event triggers when you click an item in the column menu.

Composition API (~/src/App.vue)

<template>
  <div>
    <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
      :columns="columns" :allowFiltering='true' :splitterSettings="splitterSettings" :showColumnMenu='true'
      :allowSorting='true' :columnMenuClick='columnMenuClick' :columnMenuOpen='columnMenuOpen'></ejs-gantt>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { GanttComponent as EjsGantt, Sort, Filter, ColumnMenu } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const taskFields = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  duration: 'Duration',
  progress: 'Progress',
  child: 'subtasks',
}
const height = '450px';
const splitterSettings = {
  position: '100%'
};
const columns = [
  { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
  { field: 'TaskName', headerText: 'Task Name', width: '150' },
  { field: 'StartDate', headerText: 'Start Date', width: '150' },
  { field: 'Duration', headerText: 'Duration', width: '150' },
  { field: 'Progress', headerText: 'Progress', width: '150' },
];
const columnMenuOpen = function () {
  alert('columnMenuOpen event is Triggered');
}
const columnMenuClick = function () {
  alert('columnMenuClick event is Triggered');
}
provide('gantt', [Sort, Filter, ColumnMenu]);
</script>

Options API (~/src/App.vue)

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns = "columns" :allowFiltering = 'true' :splitterSettings = "splitterSettings" :showColumnMenu = 'true' :allowSorting = 'true'
        :columnMenuClick='columnMenuClick' :columnMenuOpen='columnMenuOpen'></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Sort, Filter, ColumnMenu } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
         data: editingData,
         taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            height:'450px',
            splitterSettings:{
            position: '100%'
          },
        columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'Duration', headerText: 'Duration', width: '150' },
            { field: 'Progress', headerText: 'Progress', width: '150' },
        ],
      };
  },
    provide: {
      gantt: [ Sort, Filter, ColumnMenu ]
  },
  methods: {
      columnMenuOpen: function(){
          alert('columnMenuOpen event is Triggered');
      },
      columnMenuClick: function(){
          alert('columnMenuClick event is Triggered');
      }
  }
};
</script>

Custom column menu item

Custom column menu items can be added by defining the columnMenuItems property. Actions for these custom items can be defined in the columnMenuClick event.

Composition API (~/src/App.vue)

<template>
  <div>
    <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
      :columns="columns" :splitterSettings="splitterSettings" :showColumnMenu='true' :allowSorting='true'
      :columnMenuClick='columnMenuClick' :columnMenuItems='columnMenuItems' :sortSettings='sortSettings'></ejs-gantt>
  </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Sort, Filter, ColumnMenu } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const gantt = ref(null);
const data = editingData;
const columnMenuItems = [{ text: 'Clear Sorting', id: 'ganttclearsorting' }];
const taskFields = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  duration: 'Duration',
  progress: 'Progress',
  child: 'subtasks',
};
const height = '450px';
const splitterSettings = {
  position: '100%'
};
const columns = [
  { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
  { field: 'TaskName', headerText: 'Task Name', width: '150' },
  { field: 'StartDate', headerText: 'Start Date', width: '150' },
  { field: 'Duration', headerText: 'Duration', width: '150' },
  { field: 'Progress', headerText: 'Progress', width: '150' },
];
const sortSettings = { columns: [{ direction: "Ascending", field: "TaskName" }] };
const columnMenuClick = function (args) {
  if (args.item.id === 'ganttclearsorting') {
    var ganttChart = gantt.value.ej2Instances;
    ganttChart.clearSorting();
  }
}
provide('gantt', [Sort, Filter, ColumnMenu]);
</script>

Options API (~/src/App.vue)

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns = "columns" :splitterSettings = "splitterSettings" :showColumnMenu = 'true' :allowSorting = 'true' :columnMenuClick='columnMenuClick' :columnMenuItems='columnMenuItems'
        :sortSettings='sortSettings'></ejs-gantt>
    </div>
</template>
<script>
import { GanttComponent, Sort, Filter, ColumnMenu } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
         data: editingData,
         columnMenuItems: [{text:'Clear Sorting', id:'ganttclearsorting'}],
         taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            height:'450px',
            splitterSettings:{
            position: '100%'
          },
        columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'Duration', headerText: 'Duration', width: '150' },
            { field: 'Progress', headerText: 'Progress', width: '150' },
        ],
        sortSettings: {columns:[{direction: "Ascending", field: "TaskName"}]}
      };
  },
    provide: {
      gantt: [ Sort, Filter, ColumnMenu ]
  },
  methods: {
      columnMenuClick: function(args) {
        if(args.item.id === 'ganttclearsorting'){
            var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
            ganttChart.clearSorting();
        }
    }
  }
};
</script>

Customize menu items for specific columns

Sometimes, you may need to hide an item from the column menu for specific columns. In that case, set columnMenuOpenEventArgs.hide to true in the columnMenuOpen event.

In the following sample, the Filter item is hidden in the column menu when it opens for the Task Name column.

Composition API (~/src/App.vue)

<template>
  <div>
    <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
      :columns="columns" :allowFiltering='true' :splitterSettings="splitterSettings" :showColumnMenu='true'
      :allowSorting='true' :columnMenuOpen='columnMenuOpen'></ejs-gantt>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { GanttComponent as EjsGantt, Sort, Filter, ColumnMenu } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const taskFields = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  duration: 'Duration',
  progress: 'Progress',
  child: 'subtasks',
};
const height = '450px';
const splitterSettings = {
  position: '100%'
};
const columns = [
  { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
  { field: 'TaskName', headerText: 'Task Name', width: '150' },
  { field: 'StartDate', headerText: 'Start Date', width: '150' },
  { field: 'Duration', headerText: 'Duration', width: '150' },
  { field: 'Progress', headerText: 'Progress', width: '150' },
];
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;
    }
  }
}
provide('gantt', [Sort, Filter, ColumnMenu]);
</script>

Options API (~/src/App.vue)

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns = "columns" :allowFiltering = 'true' :splitterSettings = "splitterSettings" :showColumnMenu = 'true' :allowSorting = 'true' :columnMenuOpen='columnMenuOpen'></ejs-gantt>
    </div>
</template>
<script>
import { GanttComponent, Sort, Filter, ColumnMenu } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
         data: editingData,
         taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            height:'450px',
            splitterSettings:{
            position: '100%'
          },
        columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'Duration', headerText: 'Duration', width: '150' },
            { field: 'Progress', headerText: 'Progress', width: '150' },
        ],
      };
  },
    provide: {
      gantt: [ Sort, Filter, ColumnMenu ]
  },
   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>