groups[]

Contains an array of command groups in the tab.

Type: Array<Object>

commands

Lists commands in a group.

Accepted Values: 'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'fontColor' | 'lineColor' | 'fillColor' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor'

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

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");
});

Use the DiagramCommand enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Separator, ExportSvg, ExportPng, ExportJpg, Undo, Redo, Cut, Copy, Paste, SelectAll, Delete, FontName, FontSize, Bold, Italic, Underline, FontColor, LineColor, FillColor, TextAlignLeft, TextAlignCenter, TextAlignRight, Lock, Unlock, SendToBack, BringToFront, InsertShapeImage, EditShapeImage, DeleteShapeImage, ConnectorLineType, ConnectorLineStart, ConnectorLineEnd, LayoutTreeTopToBottom, LayoutTreeBottomToTop, LayoutTreeLeftToRight, LayoutTreeRightToLeft, LayoutLayeredTopToBottom, LayoutLayeredBottomToTop, LayoutLayeredLeftToRight, LayoutLayeredRightToLeft, FullScreen, ZoomLevel, ShowGrid, SnapToGrid, GridSize, Units, PageSize, PageOrientation, PageColor.

title

Specifies a title of the group.

Type:

String