JavaScript/jQuery Diagram - viewToolbar.commands

Lists commands in the toolbar.

Type:

Array<CustomCommand | Command>

Default Value: undefined

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

jQuery
JavaScript
$(function() {
    var diagram = $("#diagram").dxDiagram({
        viewToolbar: {
            commands: ["zoomLevel", "fullScreen", "units", {name: "sayHello", text: "Say Hello", icon: "blockquote"},
                {name: "export", icon: "export", items: ["exportSvg","exportPng","exportJpg"]}]
        }, 
        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