Angular Diagram - historyToolbar.commands
The history toolbar can contain default and custom commands. Handle the CustomCommand event to respond to a custom command click.
$(function() { var diagram = $("#diagram").dxDiagram({ historyToolbar: { commands: ["undo", "redo", {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
.
icon
This property accepts one of the following:
- The icon's URL
- The icon's name if the icon is from the DevExtreme icon library
- The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
- The icon in the Base64 format
- The icon in the SVG format. Ensure that the source is reliable.
name
Use this name to identify the clicked custom command in the onCustomCommand function.
If you have technical questions, please create a support ticket in the DevExpress Support Center.