Your search did not match any results.

UI Customization

Documentation

DevExtreme Diagram is currently available as a community technology preview (CTP). Expected to officially ship in June 2020.

The Diagram widget allows you to customize its UI elements with the following options.

  • The contextMenu option controls the context menu availability and specifies the visible commands.
  • The propertiesPanel option contains settings of the Properties panel.
  • 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.
@(Html.DevExtreme().Diagram() .ID("diagram") .ContextMenu(cm => cm .Enabled(true) .Commands(new[] { DiagramContextMenuCommand.BringToFront, DiagramContextMenuCommand.SendToBack, DiagramContextMenuCommand.Lock, DiagramContextMenuCommand.Unlock }) ) .PropertiesPanel(pp => pp .Enabled(true) .Collapsible(false) .Groups(g => { g.Add().Commands(new[] { DiagramPropertiesPanelCommand.Units }); g.Add().Commands(new[] { DiagramPropertiesPanelCommand.PageSize, DiagramPropertiesPanelCommand.PageOrientation, DiagramPropertiesPanelCommand.PageColor }); }) ) .Toolbar(tb => tb .Visible(true) .Commands(new[] { DiagramToolbarCommand.Undo, DiagramToolbarCommand.Redo, DiagramToolbarCommand.Separator, DiagramToolbarCommand.FontName, DiagramToolbarCommand.FontSize, DiagramToolbarCommand.Separator, DiagramToolbarCommand.Bold, DiagramToolbarCommand.Italic, DiagramToolbarCommand.Underline, DiagramToolbarCommand.Separator, DiagramToolbarCommand.FontColor, DiagramToolbarCommand.LineColor, DiagramToolbarCommand.FillColor, DiagramToolbarCommand.Separator }) ) .Toolbox(tb => tb .Visible(true) .Groups(g => { g.Add().Category(DiagramShapeCategory.General).Title("General"); g.Add().Category(DiagramShapeCategory.Flowchart).Title("Flowchart").Expanded(true); }) ) ) <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; }