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>

​