Angular Diagram - contextMenu.commands

Lists commands in the context menu.

Selector: dxi-command
Type:

Array<CustomCommand | Command>

Default Value: undefined

NOTE
The 'fontColor', 'lineColor', 'fillColor', and 'pageColor' commands have no effect in the context menu.

The context menu can contain default and custom commands. Handle the CustomCommand event to respond to a custom command click.

jQuery
JavaScript
$(function() {
    var diagram = $("#diagram").dxDiagram({
        contextMenu: {
            commands: ["cut","copy", "paste", {name: "sayHello", text: "Say Hello", icon: "blockquote"}]
        }, 
        onCustomCommand: function(e) {
            if (e.name == "sayHello")
            alert("Hello!")
        },
    }).dxDiagram("instance");
});

icon

Specifies the custom command's icon.

Type:

String

This property accepts one of the following:

items

Lists command sub items.

Type:

Array<CustomCommand | Command>

location

Specifies a location for the command or separator on the main toolbar.

Type:

ToolbarItemLocation

Default Value: 'before'

NOTE

This property does not allow you to set the location of the command or separator in the context menu, and history and view toolbars.

Refer to the following section for more information: Specify a Command's Location on the Main Toolbar.

name

Specifies the custom command's identifier.

Type:

String

|

Command

Use this name to identify the clicked custom command in the onCustomCommand function.

text

Specifies the custom command's text and tooltip text.

Type:

String