DevExtreme Angular - 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 }
  • ]
  • }
  • });
  • });