All docs
V20.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.
Vue

tabs[]

Contains an array of tabs in the Properties panel.

Type: Array<Object>
Default Value: undefined

commands

Lists commands in a tab.

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'

Use the groups option to group commands in the tab. Note, if the groups option is specified, the commands option is not in effect.

A properties panel tab 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: [{
            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.

groups[]

Contains an array of command groups in the tab.

Type: Array<Object>

title

Specifies the tab's title.

Type:

String

Titles and tab headers are not displayed when there is only one tab in the Properties panel.