JavaScript/jQuery Diagram - Diagram Tools
The Diagram UI component allows you to customize its UI tools with the following properties.
jQuery
index.js
$(function() {
var diagram = $("#diagram").dxDiagram({
contextMenu: {
enabled: true,
commands: ["bringToFront","sendToBack", "lock", "unlock"]
},
contextToolbox: {
enabled: true,
category: "flowchart",
shapeIconsPerRow: 5,
width: 200
},
propertiesPanel: {
visibility: 'visible',
tabs: [{
groups: [ { title: "Page Properties", commands: ["pageSize", "pageOrientation", "pageColor"] } ]
}]
},
historyToolbar: {
visible: false
},
viewToolbar: {
visible: true,
commands: ["zoomLevel", "fullScreen", "units",
{name: "sayHello", text: "Say Hello", icon: "blockquote"},
{name: "export", icon: "export", items: ["exportSvg","exportPng","exportJpg"]}]
},
mainToolbar: {
visible: true,
commands: [
{ name: "undo" },
{ name: "redo" },
{ name: "separator" },
{ name: "fontName" },
{ name: "fontSize" },
{ name: "separator" },
{ name: "bold" },
{ name: "italic" },
{ name: "underline" },
{ name: "separator" },
{ name: "fontColor" },
{ name: "lineColor" },
{ name: "fillColor" },
{ name: "separator" },
{ name: "clear", icon: "clearsquare", text: "Clear Diagram" }
]
},
toolbox: {
visibility: 'visible',
groups: [
"general", { category: "flowchart", title: "Flowchart", expanded: true }
],
showSearch: false,
shapeIconsPerRow: 4,
width: 220
},
onCustomCommand: function(e) {
if(e.name === "clear") {
var result = DevExpress.ui.dialog.confirm(
"Are you sure you want to clear the diagram? This action cannot be undone.", "Warning");
result.done(
function(dialogResult) {
if(dialogResult) {
e.component.import("");
}
}
);}
else if (e.name == "sayHello")
alert("Hello!")
}
}).dxDiagram("instance");
...Angular
app.component.html
app.component.ts
<dx-diagram #diagram id="diagram" (onCustomCommand)="onCustomCommand($event)">
<dxo-context-menu [enabled]="true" [commands]='["bringToFront", "sendToBack", "lock", "unlock"]'>
</dxo-context-menu>
<dxo-context-toolbox [enabled]="true" category="flowchart" [width]="200" [shapeIconsPerRow]="5">
</dxo-context-toolbox>
<dxo-properties-panel visibility="visible">
<dxi-tab>
<dxi-group title="Page Properties" [commands]='["pageSize","pageOrientation","pageColor"]'></dxi-group>
</dxi-tab>
</dxo-properties-panel>
<dxo-history-toolbar [visible]="false">
</dxo-history-toolbar>
<dxo-view-toolbar [visible]="true">
<dxi-command name="zoomLevel"></dxi-command>
<dxi-command name="fullScreen"></dxi-command>
<dxi-command name="units"></dxi-command>
<dxi-command name="sayHello" icon="blockquote" text="Say Hello"></dxi-command>
<dxi-command name="export" icon="export" [items] = '["exportSvg","exportPng","exportJpg"]'></dxi-command>
</dxo-view-toolbar>
<dxo-main-toolbar [visible]="true">
<dxi-command name="undo"></dxi-command>
<dxi-command name="redo"></dxi-command>
<dxi-command name="separator"></dxi-command>
<dxi-command name="fontName"></dxi-command>
<dxi-command name="fontSize"></dxi-command>
<dxi-command name="separator"></dxi-command>
<dxi-command name="bold"></dxi-command>
<dxi-command name="italic"></dxi-command>
<dxi-command name="underline"></dxi-command>
<dxi-command name="separator"></dxi-command>
<dxi-command name="fontColor"></dxi-command>
<dxi-command name="lineColor"></dxi-command>
<dxi-command name="fillColor"></dxi-command>
<dxi-command name="separator"></dxi-command>
<dxi-command name="clear" icon="clearsquare" text="Clear Diagram"></dxi-command>
</dxo-main-toolbar>
<dxo-toolbox visibility="visible" [showSearch]="false" [shapeIconsPerRow]="4" [width]="220">
<dxi-group category="general" title="General"></dxi-group>
<dxi-group category="flowchart" title="Flowchart" [expanded]="true"></dxi-group>
</dxo-toolbox>
</dx-diagram>
// ...
onCustomCommand(e) {
if(e.name === "clear") {
let result = dialog.confirm("Are you sure you want to clear the diagram? This action cannot be undone.", "Warning");
result.then(
function(dialogResult) {
if(dialogResult) {
e.component.import("");
}
}
);
}
else if (e.name == "sayHello")
alert("Hello!")
}
// ...Vue
App.vue
<template>
<DxDiagram
id="diagram"
ref="diagram"
@custom-command="onCustomCommand"
>
<DxContextMenu
:enabled="true"
:commands="['bringToFront', 'sendToBack' , 'lock' , 'unlock' ]"
/>
<DxContextToolbox
:enabled="true"
:category="'flowchart'"
:shape-icons-per-row="5"
:width="200"
/>
<DxPropertiesPanel
:visibility="'visible'"
>
<DxTab>
<DxGroup
:title="'Page Properties'"
:commands="['pageSize', 'pageOrientation' , 'pageColor' ]"
/>
</DxTab>
</DxPropertiesPanel>
<DxHistoryToolbar
:visible="false"
/>
<DxViewToolbar
:visible="true"
>
<DxCommand
:name="'zoomLevel'"
/>
<DxCommand
:name="'fullScreen'"
/>
<DxCommand
:name="'units'"
/>
<DxCommand
:name="'sayHello'"
:icon="'blockquote'"
:text="'Say Hello'"
/>
<DxCommand
:name="'export'"
:icon="'export'"
:items="['exportSvg','exportPng','exportJpg']"
/>
</DxViewToolbar>
<DxMainToolbar
:visible="true"
>
<DxCommand
:name="'undo'"
/>
<DxCommand
:name="'redo'"
/>
<DxCommand
:name="'separator'"
/>
<DxCommand
:name="'fontName'"
/>
<DxCommand
:name="'fontSize'"
/>
<DxCommand
:name="'separator'"
/>
<DxCommand
:name="'bold'"
/>
<DxCommand
:name="'italic'"
/>
<DxCommand
:name="'underline'"
/>
<DxCommand
:name="'separator'"
/>
<DxCommand
:name="'fontColor'"
/>
<DxCommand
:name="'lineColor'"
/>
<DxCommand
:name="'fillColor'"
/>
<DxCommand
:name="'separator'"
/>
<DxCommand
:name="'clear'"
:icon="'clearsquare'"
:text="'Clear Diagram'"
/>
</DxMainToolbar>
<DxToolbox
:visibility="'visible'"
:show-search="false"
:shape-icons-per-row="4"
:width="220"
>
<DxGroup
:category="'general'"
:title="'General'"
/>
<DxGroup
:category="'flowchart'"
:title="'Flowchart'"
:expanded="true"
/>
</DxToolbox>
</DxDiagram>
</template>
<script>
import { DxDiagram, DxContextMenu, DxContextToolbox, DxPropertiesPanel, DxGroup, DxTab,
DxHistoryToolbar, DxViewToolbar, DxMainToolbar, DxCommand, DxToolbox } from 'devextreme-vue/diagram';
import dialog from 'devextreme/ui/dialog';
import 'whatwg-fetch';
export default {
components: {
DxDiagram, DxContextMenu, DxContextToolbox, DxPropertiesPanel, DxGroup, DxTab,
DxHistoryToolbar, DxViewToolbar, DxMainToolbar, DxCommand, DxToolbox
},
mounted() {
var diagram = this.$refs['diagram'].instance;
fetch('data/diagram-flow.json')
.then(function(response) {
return response.json();
})
.then(function(json) {
diagram.import(JSON.stringify(json));
})
.catch(function() {
throw 'Data Loading Error';
});
},
methods: {
onCustomCommand(e) {
if(e.name === 'clear') {
var result = dialog.confirm('Are you sure you want to clear the diagram?
This action cannot be undone.', 'Warning');
result.then(
function(dialogResult) {
if(dialogResult) {
e.component.import('');
}
}
);
}
else if (e.name == "sayHello")
alert("Hello!")
}
}
};
</script>React
App.js
class App extends React.Component {
// ...
onCustomCommand(e) {
if(e.name === 'clear') {
var result = dialog.confirm('Are you sure you want to clear the diagram?
This action cannot be undone.', 'Warning');
result.then(
function(dialogResult) {
if(dialogResult) {
e.component.import('');
}
}
);
}
else if (e.name == "sayHello")
alert("Hello!")
}
render() {
return (
<Diagram id="diagram" ref={this.diagramRef} onCustomCommand={this.onCustomCommand}>
<ContextMenu enabled={true} commands={['bringToFront', 'sendToBack', 'lock', 'unlock']} />
<ContextToolbox enabled={true} category="flowchart" shapeIconsPerRow={5} width={200} />
<PropertiesPanel visibility="visible">
<Tab>
<Group title="Page Properties" commands={['pageSize', 'pageOrientation', 'pageColor']} />
</Tab>
</PropertiesPanel>
<HistoryToolbar visible={false} />
<ViewToolbar visible={true}>
<Command name="zoomLevel" />
<Command name="fullScreen" />
<Command name="units" />
<Command name="sayHello" icon="blockquote" text="Say Hello" />
<Command name="export" icon="export" items = {["exportSvg","exportPng","exportJpg"]} />
</ViewToolbar>
<MainToolbar visible={true}>
<Command name="undo" />
<Command name="redo" />
<Command name="separator" />
<Command name="fontName" />
<Command name="fontSize" />
<Command name="separator" />
<Command name="bold" />
<Command name="italic" />
<Command name="underline" />
<Command name="separator" />
<Command name="fontColor" />
<Command name="lineColor" />
<Command name="fillColor" />
<Command name="separator" />
<Command name="clear" icon="clearsquare" text="Clear Diagram" />
</MainToolbar>
<Toolbox visibility="visible" showSearch={false} shapeIconsPerRow={4} width={220}>
<Group category="general" title="General" />
<Group category="flowchart" title="Flowchart" expanded={true} />
</Toolbox>
</Diagram>
);
}
}ASP.NET Core Controls
Diagram.cshtml
@(Html.DevExtreme().Diagram()
.ID("diagram")
.ContextMenu(cm => cm
.Enabled(true)
.Commands(new[] {
DiagramCommand.BringToFront,
DiagramCommand.SendToBack,
DiagramCommand.Lock,
DiagramCommand.Unlock
})
)
.ContextToolbox(ct => ct
.Enabled(true)
.Category(DiagramShapeCategory.Flowchart)
.ShapeIconsPerRow(5)
.Width(200)
)
.PropertiesPanel(pp => pp
.Visibility(DiagramPanelVisibility.Visible)
.Tabs(t => {
t.Add()
.Groups(g => {
g.Add()
.Title("Page Properties")
.Commands(new[] { DiagramCommand.PageSize, DiagramCommand.PageOrientation,
DiagramCommand.PageColor });
});
})
)
.HistoryToolbar(tb => tb
.Visible(false)
)
.ViewToolbar(tb => tb
.Visible(true)
.Commands(cmds => {
cmds.Add().Name(DiagramCommand.ZoomLevel);
cmds.Add().Name(DiagramCommand.FullScreen);
cmds.Add().Name(DiagramCommand.Units);
cmds.Add().Name("sayHello").Text("Say Hello").Icon("blockquote");
cmds.Add().Name("export").Icon("export").Items(items => {
items.Add().Name(DiagramCommand.ExportSvg);
items.Add().Name(DiagramCommand.ExportPng);
items.Add().Name(DiagramCommand.ExportJpg);
});
})
)
.MainToolbar(tb => tb
.Visible(true)
.Commands(cmds => {
cmds.Add().Name(DiagramCommand.Undo);
cmds.Add().Name(DiagramCommand.Redo);
cmds.Add().Name(DiagramCommand.Separator);
cmds.Add().Name(DiagramCommand.FontName);
cmds.Add().Name(DiagramCommand.FontSize);
cmds.Add().Name(DiagramCommand.Separator);
cmds.Add().Name(DiagramCommand.Bold);
cmds.Add().Name(DiagramCommand.Italic);
cmds.Add().Name(DiagramCommand.Underline);
cmds.Add().Name(DiagramCommand.Separator);
cmds.Add().Name(DiagramCommand.FontColor);
cmds.Add().Name(DiagramCommand.LineColor);
cmds.Add().Name(DiagramCommand.FillColor);
cmds.Add().Name(DiagramCommand.Separator);
cmds.Add().Name("clear").Text("Clear Diagram").Icon("clearsquare");
})
)
.Toolbox(tb => tb
.Visibility(DiagramPanelVisibility.Visible)
.Groups(g => {
g.Add().Category(DiagramShapeCategory.General).Title("General");
g.Add().Category(DiagramShapeCategory.Flowchart).Title("Flowchart").Expanded(true);
})
.ShowSearch(false)
.ShapeIconsPerRow(4)
.Width(220)
)
.OnCustomCommand(@<text>
function(e) {
if(e.name === "clear") {
var result = DevExpress.ui.dialog.confirm("Are you sure you want to clear the diagram?
This action cannot be undone.", "Warning");
result.done(
function(dialogResult) {
if(dialogResult) {
e.component.import("");
}
}
);
}
else if (e.name == "sayHello")
alert("Hello!")
}
</text>)
)ASP.NET MVC Controls
Diagram.cshtml
@(Html.DevExtreme().Diagram()
.ID("diagram")
.ContextMenu(cm => cm
.Enabled(true)
.Commands(new[] {
DiagramCommand.BringToFront,
DiagramCommand.SendToBack,
DiagramCommand.Lock,
DiagramCommand.Unlock
})
)
.ContextToolbox(ct => ct
.Enabled(true)
.Category(DiagramShapeCategory.Flowchart)
.ShapeIconsPerRow(5)
.Width(200)
)
.PropertiesPanel(pp => pp
.Visibility(DiagramPanelVisibility.Visible)
.Tabs(t => {
t.Add()
.Groups(g => {
g.Add()
.Title("Page Properties")
.Commands(new[] { DiagramCommand.PageSize, DiagramCommand.PageOrientation,
DiagramCommand.PageColor });
});
})
)
.HistoryToolbar(tb => tb
.Visible(false)
)
.ViewToolbar(tb => tb
.Visible(true)
.Commands(cmds => {
cmds.Add().Name(DiagramCommand.ZoomLevel);
cmds.Add().Name(DiagramCommand.FullScreen);
cmds.Add().Name(DiagramCommand.Units);
cmds.Add().Name("sayHello").Text("Say Hello").Icon("blockquote");
cmds.Add().Name("export").Icon("export").Items(items => {
items.Add().Name(DiagramCommand.ExportSvg);
items.Add().Name(DiagramCommand.ExportPng);
items.Add().Name(DiagramCommand.ExportJpg);
});
})
)
.MainToolbar(tb => tb
.Visible(true)
.Commands(cmds => {
cmds.Add().Name(DiagramCommand.Undo);
cmds.Add().Name(DiagramCommand.Redo);
cmds.Add().Name(DiagramCommand.Separator);
cmds.Add().Name(DiagramCommand.FontName);
cmds.Add().Name(DiagramCommand.FontSize);
cmds.Add().Name(DiagramCommand.Separator);
cmds.Add().Name(DiagramCommand.Bold);
cmds.Add().Name(DiagramCommand.Italic);
cmds.Add().Name(DiagramCommand.Underline);
cmds.Add().Name(DiagramCommand.Separator);
cmds.Add().Name(DiagramCommand.FontColor);
cmds.Add().Name(DiagramCommand.LineColor);
cmds.Add().Name(DiagramCommand.FillColor);
cmds.Add().Name(DiagramCommand.Separator);
cmds.Add().Name("clear").Text("Clear Diagram").Icon("clearsquare");
})
)
.Toolbox(tb => tb
.Visibility(DiagramPanelVisibility.Visible)
.Groups(g => {
g.Add().Category(DiagramShapeCategory.General).Title("General");
g.Add().Category(DiagramShapeCategory.Flowchart).Title("Flowchart").Expanded(true);
})
.ShowSearch(false)
.ShapeIconsPerRow(4)
.Width(220)
)
.OnCustomCommand(@<text>
function(e) {
if(e.name === "clear") {
var result = DevExpress.ui.dialog.confirm("Are you sure you want to clear the diagram?
This action cannot be undone.", "Warning");
result.done(
function(dialogResult) {
if(dialogResult) {
e.component.import("");
}
}
);
}
else if (e.name == "sayHello")
alert("Hello!")
}
</text>)
)
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.