All docs
V24.1
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery Diagram - mainToolbar

Configures the main toolbar settings.

Type:

Object

Default Value: {}

commands[]

Lists commands in the toolbar.

Type:

Array<CustomCommand | Command>

Default Value: undefined

The main 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({
        mainToolbar: {
            visible: true,
            commands: ["fontName", "fontSize", "bold", "italic", "underline", {name: "sayHello", text: "Say Hello", icon: "blockquote"}]
        }, 
        onCustomCommand: function(e) {
            if (e.name == "sayHello")
            alert("Hello!")
        },
    }).dxDiagram("instance");
});

visible

Specifies the toolbar's visibility.

Type:

Boolean

Default Value: false