items[]

Configures context menu item settings.

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

The context menu contains a set of default commands: 'addTask', 'taskDetails', and 'deleteTask'. Use the contextMenu option 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.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({
        contextMenu: {
            items: [
                // Specify a predefined item's name only
                "expandAll",
                "redo",
                // Specify a predefined item's name and optional settings
                {
                    name: "zoomIn",
                    text: "Zooming"
                }
                //...
            ]
        }            
    });
});  

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.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({
        contextMenu: {
            items: [
                {
                    text: "Category",
                    items:[
                        {
                            text: "Item 1",
                            name: "item1"
                        },
                        {
                            text: "Item 2",
                            name: "item2"
                        },
                        {
                            text: "Item 3",
                            name: "item3"
                        }                        
                    ]                        
                }
                // ...
            ]
        }
        onCustomCommand: onCustomCommandClick
        // ...
    });
});
function onCustomCommandClick(args) {
    if(e.name == 'item1') {
        // your code
    }
}

DevExtreme Gantt - Custom Context Menu Items

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 option 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 option accepts one of the following:

items

Specifies nested menu items.

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'

render

An alias for the template option 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.
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