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.
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 }
- ]
- }
- });
- });
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.