Customize the Context Menu's Items
The example below demonstrates how to show default and custom commands in the context menu depending on the selected item:
- $(function () {
- var diagram = $("#diagram").dxDiagram({
- onSelectionChanged: function(e) {
- // Displays the "showGrid" and "snapToGrid" commands when a user selects no items
- if (e.items.length === 0)
- e.component.option("contextMenu.commands", ["showGrid", "snapToGrid"]);
- else
- // Displays the "fontName", "fontSize", and "selectShapes" commands when a user selects a shape
- if (e.items[0].itemType === "shape")
- e.component.option("contextMenu.commands", ["fontName", "fontSize", {name: "selectShapes", text: "Select All Shapes"}]);
- // Displays the "connectorLineStart", "connectorLineEnd", and "selectConnectors" commands when a user selects a connector
- else
- e.component.option("contextMenu.commands", ["connectorLineStart", "connectorLineEnd", {name: "selectConnectors", text: "Select All Connectors"}]);
- },
- onCustomCommand: function(e) {
- if (e.name == "selectShapes") {
- var shapes = e.component.getItems().filter(function(item) {
- return (item.itemType === "shape")
- });
- e.component.setSelectedItems(shapes);
- }
- if (e.name == "selectConnectors") {
- var connectors = e.component.getItems().filter(function(item) {
- return (item.itemType === "connector")
- });
- e.component.setSelectedItems(connectors);
- }
- },
- }).dxDiagram("instance");
- });
Specify a Command's Location on the Main Toolbar
Use the location property to set the location of a command or separator on the main toolbar. This property accepts one of the following values:
center
Places the command in the center of the main toolbar.before
Places the command before the central element(s).after
Places the command after the central element(s).
The Diagram UI component displays commands with the same location property value in the order in which you listed them. When the main toolbar cannot accommodate all commands, the component places excess commands in the overflow menu.
The example below demonstrates how to customize the main toolbar:
- $(function() {
- var diagram = $("#diagram").dxDiagram({
- mainToolbar: {
- visible: true,
- commands: [
- { name: "undo", location: "before" },
- { name: "redo", location: "before" },
- { name: "separator", location: "before" },
- { name: "copy", location: "center" },
- { name: "paste", location: "center" },
- { name: "cut", location: "center" },
- { name: "separator", location: "center" },
- { name: "clear", icon: "clearsquare", text: "Clear Diagram", location: "after" }
- ]
- },
- toolbox: {
- visibility: 'hidden',
- },
- historyToolbar: {
- visible: false
- },
- viewToolbar: {
- visible: false
- },
- onCustomCommand: 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("");
- }
- }
- );
- }
- }
- }).dxDiagram("instance");
- $.ajax({
- url: "data/diagram-flow.json",
- dataType: "text",
- success: function(data) {
- diagram.import(data);
- }
- });
- });
If you have technical questions, please create a support ticket in the DevExpress Support Center.