React Gantt - contextMenu.items

Configures context menu item settings.

Selector: Item
Accepted Values: 'undo' | 'redo' | 'expandAll' | 'collapseAll' | 'addTask' | 'deleteTask' | 'zoomIn' | 'zoomOut' | 'deleteDependency' | 'taskDetails' | 'resourceManager'

The context menu contains a set of default commands: 'addTask', 'taskDetails', and 'deleteTask'. Use the contextMenu property to recreate the context menu items.

DevExtreme Gantt - Default Context Menu

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.

App.js
  • import React from 'react';
  • import Gantt, { ContextMenu } from 'devextreme-react/gantt';
  •  
  • const App = () => {
  • return (
  • <Gantt...>
  • <ContextMenu>
  • <Item name="addTask" />
  • <Item name="deleteTask" />
  • <Item text="Zoom">
  • <Item name="zoomIn" />
  • <Item name="zoomOut" />
  • </Item>
  • </ContextMenu>
  • </Gantt>
  • );
  • };
  •  
  • export default App;

DevExtreme Gantt - Predefined Context Menu Items

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.

App.js
  • import React from 'react';
  • import Gantt, { ContextMenu } from 'devextreme-react/gantt';
  •  
  • const App = () => {
  • const onCustomCommand = (e) => {
  • if(e.name == 'item1') {
  • // your code
  • }
  • };
  •  
  • return (
  • <Gantt
  • onCustomCommand={onCustomCommand} >
  • <ContextMenu>
  • <Item text="Category">
  • <Item name="item1" text="Item 1" />
  • <Item name="item2" text="Item 2" />
  • <Item name="item3" text="Item 3" />
  • </Item>
  • </ContextMenu>
  • </Gantt>
  • );
  • }
  •  
  • export default App;

Result:

DevExtreme Gantt - Custom Context Menu Items

beginGroup

Specifies whether a group separator is displayed over the item.

Type:

Boolean

You can add group separators only between items in submenus.

closeMenuOnClick

Specifies if a menu is closed when a user clicks the item.

Type:

Boolean

Default Value: true

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

disabled

Specifies whether the menu item responds to user interaction.

Type:

Boolean

Default Value: false

icon

Specifies the menu item's icon.

Type:

String

This property accepts one of the following:

items

Specifies nested menu items.

Selector: Item

Nested menu items should have the same structure as the first-level menu items.

name

Specifies the context menu item name.

Type:

String

Accepted Values: 'undo' | 'redo' | 'expandAll' | 'collapseAll' | 'addTask' | 'deleteTask' | 'zoomIn' | 'zoomOut' | 'deleteDependency' | 'taskDetails' | 'resourceManager'

App.js
  • import React from 'react';
  • import Gantt, { ContextMenu } from 'devextreme-react/gantt';
  •  
  • const App = () => {
  • const onCustomCommand = (e) => {
  • if(e.name == 'item1') {
  • // your code
  • }
  • };
  •  
  • return (
  • <Gantt
  • onCustomCommand={onCustomCommand} >
  • <ContextMenu>
  • <Item text="Category">
  • <Item name="item1" text="Item 1" />
  • <Item name="item2" text="Item 2" />
  • <Item name="item3" text="Item 3" />
  • </Item>
  • </ContextMenu>
  • </Gantt>
  • );
  • }
  •  
  • export default App;

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

selectable

Specifies whether or not a user can select a menu item.

Type:

Boolean

Default Value: false

selected

Specifies whether or not the item is selected.

Type:

Boolean

Default Value: false

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data:

CollectionWidgetItem

The item object to be rendered.

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.

The following example adds a custom item to the component. Note that Angular and Vue use custom templates instead of the template property. In React, specify the render or component properties.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import Gantt, {
  • ContextMenu, Item
  • } from 'devextreme-react/gantt';
  •  
  • const renderCustomItem = () => {
  • return <div>Custom Item</div>;
  • }
  •  
  • function App() {
  • return (
  • <Gantt ... >
  • <ContextMenu>
  • <Item ...
  • render={renderCustomItem}
  • >
  • </Item>
  • </ContextMenu>
  • </Gantt>
  • );
  • }
  • export default App;
See Also

text

Specifies the text inserted into the item element.

Type:

String

visible

Specifies whether or not the menu item is visible.

Type:

Boolean

Default Value: true