Diagram - UI Customization

@(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) ) .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(""); } } ); } } </text>) ) <script type="text/javascript"> $(function () { $.ajax({ url: "@Url.Content("~/SampleData/diagram-flow.json")", dataType: "text", success: function(data) { $("#diagram").dxDiagram("instance").import(data); } }); }); </script>