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.

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.

jQuery

JavaScript


$(function () {
    $("#gantt").dxGantt({
        contextMenu: {
            items: [
                {
                    text: "Category",
                    items:[
                        {
                            text: "Item 1",
                            name: "item1"
                        },
                        {
                            text: "Item 2",
                            name: "item2"
                        },
                        {
                            text: "Item 3",
                            name: "item3"
                        }                        
                    ]                        
                }
                // ...
            ]
        }
        onCustomCommand: onCustomCommandClick
        // ...
    });
});
function onCustomCommandClick(e) {
    if(e.name == 'item1') {
        // your code
    }
}

Angular

Vue

React

ASP.NET MVC Controls

Result:

beginGroup

Specifies whether a group separator is displayed over the item.

Type:

Boolean

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:

The icon's URL
The icon's name if the icon is from the DevExtreme icon library
The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
The icon in the Base64 format
The icon in the SVG format. Ensure that the source is reliable.

items

Specifies nested menu items.

Type:

Array<dxContextMenuItem>

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

name

Specifies the context menu item name.

Type:

String

jQuery

JavaScript


$(function () {
    $("#gantt").dxGantt({
        contextMenu: {
            items: [
                {
                    text: "Category",
                    items:[
                        {
                            text: "Item 1",
                            name: "item1"
                        },
                        {
                            text: "Item 2",
                            name: "item2"
                        },
                        {
                            text: "Item 3",
                            name: "item3"
                        }                        
                    ]                        
                }
                // ...
            ]
        }
        onCustomCommand: onCustomCommandClick
        // ...
    });
});
function onCustomCommandClick(e) {
    if(e.name == 'item1') {
        // your code
    }
}

Angular

Vue

React

ASP.NET MVC Controls

ASP.NET Core Controls

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: undefined

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.

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

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery Gantt - contextMenu.items

beginGroup

closeMenuOnClick

component

disabled

icon

items

name

render

selectable

selected

template

See Also

text

visible