Context menu in Vue Gantt component

11 Jun 202416 minutes to read

The Gantt control allows you to perform quick actions by using context menu. When right-clicking the context menu, the context menu options are shown. To enable this feature, set the enableContextMenu to true. The default context menu options are enabled using the editSettings property. The context menu options can be customized using the contextMenuItems property.

To use the context menu, inject the ContextMenu module in the provide section.

The default items are listed in the following table.

Items	Description
`AutoFit`	Auto-fits the current column.
`AutoFitAll`	Auto-fits all columns.
`SortAscending`	Sorts the current column in ascending order.
`SortDescending`	Sorts the current column in descending order.
`TaskInformation`	Edits the current task.
`Add`	Adds a new row to the Gantt.
`Indent`	Indent the selected record to one level.
`Outdent`	Outdent the selected record to one level.
`DeleteTask`	Deletes the current task.
`Save`	Saves the edited task.
`Cancel`	Cancels the edited task.
`DeleteDependency`	Deletes the current dependency task link.
`Convert`	Converts current task to milestone or vice-versa.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div>
    <ejs-gantt ref='gantt' id="contextMenu" :dataSource="data" :taskFields="taskFields" :height="height"
      :editSettings="editSettings" :enableContextMenu="true" :allowSorting="true" :allowResizing="true"></ejs-gantt>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { GanttComponent as EjsGantt, ContextMenu, Edit, Sort, Resize, Selection } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const height = '450px';
const taskFields = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  duration: 'Duration',
  progress: 'Progress',
  dependency: 'Predecessor',
  child: 'subtasks'
};
const editSettings = {
  allowAdding: true,
  allowEditing: true,
  allowDeleting: true
};
provide('gantt', [ContextMenu, Edit, Sort, Resize, Selection]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="contextMenu" :dataSource="data" :taskFields = "taskFields" :height = "height" :editSettings="editSettings" :enableContextMenu="true" :allowSorting="true" :allowResizing= "true"></ejs-gantt>
    </div>
</template>
<script>
import { GanttComponent, ContextMenu, Edit, Sort, Resize, Selection } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
        data: editingData,
        height: '450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        },
        editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true
        }
    };
  },
  provide: {
      gantt: [ ContextMenu, Edit, Sort, Resize, Selection]
  }
};
</script>

The custom context menu items can be added by defining the contextMenuItems as a collection of contextMenuItemModel.Actions for the customized items can be defined in the contextMenuClick event and the visibility of customized items can be defined in the contextMenuOpen event.

To create custom context menu items for header area, define the target property as .e-gridheader.

The following sample shows context menu item for parent rows to expand or collapse child rows in the content area and a context menu item to hide columns in the header area.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div>
        <ejs-gantt ref='gantt' id="customContextMenu" :dataSource="data" :taskFields="taskFields" :height="height"
            :editSettings="editSettings" :enableContextMenu="true" :allowSorting="true" :allowResizing="true"
            :contextMenuItems="contextMenuItems" :contextMenuClick="contextMenuClick"
            :contextMenuOpen="contextMenuOpen"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, ContextMenu, Edit, Sort, Resize, Selection } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const customContextMenu = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    child: 'subtasks'
};
const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
};
const contextMenuItems = ['AutoFitAll', 'AutoFit', 'TaskInformation', 'DeleteTask', 'Save', 'Cancel', 'SortAscending', 'SortDescending', 'Add', 'DeleteDependency', 'Convert',
    { text: 'Collapse the Row', target: '.e-content', id: 'collapserow' },
    { text: 'Expand the Row', target: '.e-content', id: 'expandrow' },
    { text: 'Hide Column', target: '.e-gridheader', id: 'hidecols' }
];
const contextMenuClick = function (args) {
    var record = args.rowData;
    var ganttObj = customContextMenu.value.ej2Instances;
    if (args.item.id === 'collapserow') {
        ganttObj.collapseByID(Number(record.ganttProperties.taskId));
    }
    if (args.item.id === 'expandrow') {
        ganttObj.expandByID(Number(record.ganttProperties.taskId));
    }
    if (args.item.id === 'hidecols') {
        ganttObj.hideColumn(args.column.headerText);
    }
}
const contextMenuOpen = function (args) {
    var record = args.rowData;
    if (args.type !== 'Header') {
        if (!record.hasChildRecords) {
            args.hideItems.push('Collapse the Row');
            args.hideItems.push('Expand the Row');
        } else {
            if (record.expanded) {
                args.hideItems.push("Expand the Row");
            } else {
                args.hideItems.push("Collapse the Row");
            }
        }
    }
}
provide('gantt', [ContextMenu, Edit, Sort, Resize, Selection]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="customContextMenu" :dataSource="data" :taskFields = "taskFields" :height = "height" :editSettings="editSettings" :enableContextMenu="true" :allowSorting="true" :allowResizing= "true" :contextMenuItems="contextMenuItems" :contextMenuClick = "contextMenuClick" :contextMenuOpen="contextMenuOpen"></ejs-gantt>
    </div>
</template>
<script>
import { GanttComponent, ContextMenu, Edit, Sort, Resize, Selection } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
        data: editingData,
        height: '450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        },
        editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true
        },
        contextMenuItems: ['AutoFitAll', 'AutoFit', 'TaskInformation', 'DeleteTask', 'Save', 'Cancel', 'SortAscending', 'SortDescending', 'Add', 'DeleteDependency', 'Convert',
        { text: 'Collapse the Row', target: '.e-content', id: 'collapserow' },
        { text: 'Expand the Row', target: '.e-content', id: 'expandrow' },
        { text: 'Hide Column', target: '.e-gridheader', id: 'hidecols' }
        ],
    };
  },
  provide: {
      gantt: [ ContextMenu, Edit, Sort, Resize, Selection]
  },
  methods: {
        contextMenuClick: function (args) {
        var record = args.rowData;
        var ganttObj = document.getElementById('customContextMenu').ej2_instances[0];
        if (args.item.id === 'collapserow') {
            ganttObj.collapseByID(Number(record.ganttProperties.taskId));
            }
        if (args.item.id === 'expandrow') {
            ganttObj.expandByID(Number(record.ganttProperties.taskId));
            }
        if (args.item.id === 'hidecols') {
            ganttObj.hideColumn(args.column.headerText);
        }
        },
        contextMenuOpen: function (args) {
        var record = args.rowData;
            if (args.type !== 'Header') {
                if (!record.hasChildRecords) {
                    args.hideItems.push('Collapse the Row');
                    args.hideItems.push('Expand the Row');
                } else {
                    if(record.expanded){
                    args.hideItems.push("Expand the Row");
                    } else {
                    args.hideItems.push("Collapse the Row");
                    }
                }
            }
        }
    }
};
</script>

You can show an specific item in context menu for header/content area in the Gantt control by defining the target property.

Touch interaction

To perform long press action on a row, context menu is opened, and then tap a menu item to trigger its action.

Context menu in Vue Gantt component

Custom context menu items

Touch interaction