enabled
- <template>
- <DxGantt ... >
- <DxContextMenu :enabled="false" />
- </DxGantt>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxGantt, DxContextMenu } from 'devextreme-vue/gantt';
- export default {
- components: {
- DxGantt,
- DxContextMenu
- },
- data() {
- return {
- // ...
- }
- }
- }
- </script>
items[]
The context menu contains a set of default commands: 'addTask', 'taskDetails', and 'deleteTask'. Use the contextMenu property to recreate the context menu items.
To add a predefined item to the context menu, add its name and optional settings (for example, 'visible', 'text', and 'icon') to the items collection.
- <template>
- <DxGantt ... >
- <DxContextMenu>
- <DxItem name="addTask"/>
- <DxItem name="deleteTask"/>
- <DxItem text="Zoom">
- <DxItem name="zoomIn"/>
- <DxItem name="zoomOut"/>
- </DxItem>
- </DxContextMenu>
- </DxGantt>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxGantt, DxContextMenu } from 'devextreme-vue/gantt';
- export default {
- components: {
- DxGantt,
- DxContextMenu
- },
- data() {
- return {
- // ...
- }
- }
- }
- </script>
Custom Items
To add a custom context menu item, specify its text and optional settings (for example, name or category). Use the customCommand event to handle clicks on custom context menu items.
- <template>
- <DxGantt
- @custom-command="onCustomCommand" >
- <DxContextMenu>
- <DxItem text="Category">
- <DxItem name="item1" text="Item 1" />
- <DxItem name="item2" text="Item 2" />
- <DxItem name="item3" text="Item 3" />
- </DxItem>
- </DxContextMenu>
- </DxGantt>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxGantt, DxContextMenu } from 'devextreme-vue/gantt';
- export default {
- components: {
- DxGantt,
- DxContextMenu
- },
- methods: {
- onCustomCommand(e) {
- if(e.name == 'item1') {
- // your code
- }
- }
- },
- data() {
- return {
- // ...
- }
- }
- }
- </script>
Result:
If you have technical questions, please create a support ticket in the DevExpress Support Center.