Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Diagram

    UI Customization

    Documentation

    The following properties allow you to customize the Diagram UI component's UI elements:

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    ASP.NET Core

    ASP.NET MVC

    @(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>
    using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class DiagramController : Controller { public IActionResult UICustomization() { return View(); } } }
    #diagram { height: 900px; }