All docs
V20.1
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery Diagram - Diagram Tools

The Diagram UI component allows you to customize its UI tools with the following properties.

Diagram control data toolbox

View Demo

JavaScript
  $(function() {
        var diagram = $("#diagram").dxDiagram({
              contextMenu: {
                    enabled: true,
                    commands: ["bringToFront","sendToBack", "lock", "unlock"]
              },
              contextToolbox: {
                    enabled: true,
                    category: "flowchart"
              },
              historyToolbar: {
                    visible: false
              },
              mainToolbar: {
                    visible: true,
                    commands: ["undo","redo","separator","fontName","fontSize","separator","bold","italic","underline","separator",
                    "fontColor","lineColor","fillColor","separator"]
              },
              propertiesPanel: {
                    visibility: 'visible',
                    tabs: [{
                          groups: [ { title: "Page Properties", commands: ["pageSize", "pageOrientation", "pageColor"] } ]
                    }]
              },
              toolbox: {
                    visibility: 'visible',
                    groups: ["general", { category: "flowchart", title: "Flowchart", expanded: true }]
              },
              viewToolbar: {
                    visible: true
              },
        }).dxDiagram("instance");
  });