DevExtreme jQuery - 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.
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 }
]
}
});
});Feedback