JavaScript/jQuery Diagram - Customize the Diagram Component

This article contains code samples that demonstrate how to customize the Diagram UI component and its items.

Change the Component's Background Color

Override the following CSS rule to change the Diagram component's background color:

styles.css
  • #diagram .dxdi-canvas .grid {
  • fill: lightGray !important;
  • }

Change the Diagram's background color

Change the Color of Connector Points

Add the following CSS rules to change the color of connector points:

styles.css
  • .dx-diagram .dxdi-control .dxdi-canvas .connection-point:not(.selector) {
  • stroke: red;
  • }
  • .dx-diagram .dxdi-control .dxdi-canvas .connection-point:not(.selector).active {
  • fill: red;
  • }

Change the connector points color

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:

index.js
  • $(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);
  • }
  • });
  • });

Customize main toolbar