React Diagram - propertiesPanel.tabs.groups

View Demo

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