JavaScript/jQuery Diagram - propertiesPanel.tabs

View Demo

Use the groups property to group commands in the tab. Note, if the groups property is specified, the commands property 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.

$(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 property when the UI component 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.

View Demo

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