DevExtreme React - UI Customization

The Diagram widget allows you to customize its UI elements with the following options.

  • The toolbar option controls toolbar visibility and specifies a set of available commands.
  • The toolbox option controls element visibility, and specifies the groups and shapes visible in the toolbox.
  • The propertiesPanel option contains settings of the Properties panel.
  • The contextMenu option controls the context menu availability and specifies the visible commands.

Diagram control data toolbox

View Demo

JavaScript
    $(function() {
        $("#diagram").dxDiagram({
           contextMenu: {
                 enabled: true,
                 commands: ["bringToFront","sendToBack", "lock", "unlock"]
           },
           propertiesPanel: {
                 enabled: true,
                 collapsible: false,
                 groups: [
                    { commands: ["units"] },
                    { commands: ["pageSize","pageOrientation","pageColor"] }
                 ]
           },
           toolbar: {
                 visible: true,
                 commands: ["undo","redo","separator","fontName","fontSize","separator","bold","italic","underline","separator",
                    "fontColor","lineColor","fillColor","separator"]
           },
           toolbox: {
                 visible: true,
                 groups: [
                    "general", { category: "flowchart", title: "Flowchart", expanded: true }
                 ]
           }     
        });
    });