Angular Diagram - mainToolbar
commands
The main toolbar can contain default and custom commands. Handle the CustomCommand event to respond to a custom command click.
$(function() { var diagram = $("#diagram").dxDiagram({ mainToolbar: { visible: true, commands: ["fontName", "fontSize", "bold", "italic", "underline", {name: "sayHello", text: "Say Hello", icon: "blockquote"}] }, onCustomCommand: function(e) { if (e.name == "sayHello") alert("Hello!") }, }).dxDiagram("instance"); });
Use the DiagramCommand
enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Separator
, ExportSvg
, ExportPng
, ExportJpg
, Undo
, Redo
, Cut
, Copy
, Paste
, SelectAll
, Delete
, FontName
, FontSize
, Bold
, Italic
, Underline
, FontColor
, LineColor
, FillColor
, TextAlignLeft
, TextAlignCenter
, TextAlignRight
, Lock
, Unlock
, SendToBack
, BringToFront
, InsertShapeImage
, EditShapeImage
, DeleteShapeImage
, ConnectorLineType
, ConnectorLineStart
, ConnectorLineEnd
, LayoutTreeTopToBottom
, LayoutTreeBottomToTop
, LayoutTreeLeftToRight
, LayoutTreeRightToLeft
, LayoutLayeredTopToBottom
, LayoutLayeredBottomToTop
, LayoutLayeredLeftToRight
, LayoutLayeredRightToLeft
, FullScreen
, ZoomLevel
, ShowGrid
, SnapToGrid
, GridSize
, Units
, PageSize
, PageOrientation
, PageColor
.
If you have technical questions, please create a support ticket in the DevExpress Support Center.