Vue Diagram - propertiesPanel.tabs.groups

Contains an array of command groups in the tab.

Selector: DxGroup
Type:

Array<Object>

View Demo

commands

Lists commands in a group.

Selector: DxCommand
Type:

Array<dxDiagramCustomCommand>

|

Array<DiagramCommand>

A properties panel group can contain default and custom commands. Handle the CustomCommand event to respond to a custom command click.

jQuery
JavaScript
$(function() {
    var diagram = $("#diagram").dxDiagram({
    propertiesPanel: {
        visibility: 'visible',
        tabs: [
            {
                groups: [ { 
                    title: "Page Properties", 
                    commands: ["pageSize", "pageOrientation", {name: "sayHello", text: "Say Hello", icon: "blockquote"}] 
                } ]
            }
        ]
    },
        onCustomCommand: function(e) {
            if (e.name == "sayHello")
            alert("Hello!")
        },
    }).dxDiagram("instance");
});

title

Specifies a title of the group.

Type:

String