JavaScript/jQuery Diagram - viewToolbar.commands
The view toolbar can contain default and custom commands. Handle the CustomCommand event to respond to a custom command click.
jQuery
$(function() { var diagram = $("#diagram").dxDiagram({ viewToolbar: { commands: ["zoomLevel", "fullScreen", "units", {name: "sayHello", text: "Say Hello", icon: "blockquote"}, {name: "export", icon: "export", items: ["exportSvg","exportPng","exportJpg"]}] }, onCustomCommand: function(e) { if (e.name == "sayHello") alert("Hello!") }, }).dxDiagram("instance"); });
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.
location
This property does not allow you to set the location of the command or separator in the context menu, and history and view toolbars.
Refer to the following section for more information: Specify a Command's Location on the Main Toolbar.
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.