JavaScript/jQuery Diagram - Restrict Edit Operations

The Diagram UI component allows you to restrict edit operations in the following ways.

Prohibit All Operations of a Specific Type

To prohibit an operation, set the corresponding allow{Operation} editing property to false.

jQuery

$(function() {
    var diagram = $("#diagram").dxDiagram({
        editing: {
            allowAddShape: false,
            allowChangeConnection: false,
            allowChangeConnectorPoints: false,
            allowChangeConnectorText: false,
            allowChangeShapeText: false,
            allowDeleteConnector: false,
            allowDeleteShape: false,
            allowMoveShape: false,
            allowResizeShape: false,
        },
    }).dxDiagram("instance");

Angular

<dx-diagram #diagram id="diagram" >
    <dxo-editing 
        [allowAddShape]="false"
        [allowChangeConnection]="false"
        [allowChangeConnectorPoints]="false"
        [allowChangeConnectorText]="false"
        [allowChangeShapeText]="false"
        [allowDeleteConnector]="false"
        [allowDeleteShape]="false"
        [allowMoveShape]="false"
        [allowResizeShape]="false">
    </dxo-editing>
</dx-diagram>

Vue

<DxDiagram
    id="diagram"
    ref="diagram">
    <DxEditing
        :allow-add-shape="false"
        :allow-change-connection="false"
        :allow-change-connector-points="false"
        :allow-change-connector-text="false"
        :allow-change-shape-text="false"
        :allow-delete-connector="false"
        :allow-delete-shape="false"
        :allow-move-shape="false"
        :allow-resize-shape="false">
    />
</DxDiagram>
...
import { DxDiagram, DxEditing } from 'devextreme-vue/diagram';
export default {
components: {
    DxDiagram, DxEditing
},
...

React

import Diagram, { Editing } from 'devextreme-react/diagram';
...
<Diagram id="diagram" ref={this.diagramRef} >
    <Editing 
        allowAddShape={false}
        allowChangeConnection={false}
        allowChangeConnectorPoints={false}
        allowChangeConnectorText={false}
        allowChangeShapeText={false}
        allowDeleteConnector={false}
        allowDeleteShape={false}
        allowMoveShape={false}
        allowResizeShape={false} />
</Diagram>

ASP.NET Core Controls

@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .Editing(e => e
        .AllowAddShape(false)
        .AllowChangeConnection(false)
        .AllowChangeConnectorPoints(false)
        .AllowChangeConnectorText(false)
        .AllowChangeShapeText(false)
        .AllowDeleteConnector(false)
        .AllowDeleteShape(false)
        .AllowMoveShape(false)
        .AllowResizeShape(false)
    )
)

ASP.NET MVC Controls

@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .Editing(e => e
        .AllowAddShape(false)
        .AllowChangeConnection(false)
        .AllowChangeConnectorPoints(false)
        .AllowChangeConnectorText(false)
        .AllowChangeShapeText(false)
        .AllowDeleteConnector(false)
        .AllowDeleteShape(false)
        .AllowMoveShape(false)
        .AllowResizeShape(false)
    )
)

Prohibit Individual Operations

View Demo

Every time a user attempts an edit operation, the UI component raises the requestEditOperation event. Use the allowed parameter to either permit or cancel the user action. To identify the operation type and target element, use the event parameters listed below.

The operation parameter identifies the edit operation. Note that if an Allow{Operation} property is set to false, the event does not fire for this operation. The table below lists all available operations.

Operation	User action / IU update operation causes the event to be raised	Allow{Operation} property
addShape	A user is about to add a shape / The UI component determines the Paste command's visibility.	allowAddShape
addShapeFromToolbox	The UI component determines the visibility of a shape in the toolbox or context toolbox.	allowAddShape
beforeChangeConnectorText	A user is about to edit a connector's text.	allowChangeConnectorText
beforeChangeShapeText	A user is about to edit a shape's text.	allowChangeShapeText
changeConnection	A user is about to link or delink a connector from a shape / The UI component determines a connection point's visibility.	allowChangeConnection
changeConnectorPoints	A user changed a connector's points.	allowChangeConnectorPoints
changeConnectorText	A user changed a connector's text.	allowChangeConnectorText
changeShapeText	A user changed a shape's text.	allowChangeShapeText
deleteConnector	A user is about to delete a connector / The UI component determines the Cut and Delete commands' visibility.	allowDeleteConnector
deleteShape	A user is about to delete a shape / The UI component determines the visibility of the Cut and Delete commands.	allowDeleteShape
moveShape	A user moved a shape.	allowMoveShape
resizeShape	A user resized a shape.	allowResizeShape

The args parameter contains information about the shape or connector that takes part in the edit operation. The parameter's value type depends on the operation type.

Edit Operation	Return Value's Type
addShape	DiagramAddShapeArgs
addShapeFromToolbox	DiagramAddShapeFromToolboxArgs
beforeChangeConnectorText	DiagramBeforeChangeConnectorTextArgs
beforeChangeShapeText	DiagramBeforeChangeShapeTextArgs
changeConnection	DiagramChangeConnectionArgs
changeConnectorPoints	DiagramChangeConnectorPointsArgs
changeConnectorText	DiagramChangeConnectorTextArgs
changeShapeText	DiagramChangeShapeTextArgs
deleteConnector	DiagramDeleteConnectorArgs
deleteShape	DiagramDeleteShapeArgs
moveShape	DiagramMoveShapeArgs
resizeShape	DiagramResizeShapeArgs

The reason parameter specifies whether the event responds to a user action or requests instruction on related UI command availability.
- The true value indicates that the Diagram is updating the UI. Set the allowed option to false to hide the UI element associated with the specified operation.
- The modelModification value indicates that a user attempts an edit operation. You can specify whether the operation is allowed and display an error message if necessary.

jQuery

$(function() {
    $("#diagram").dxDiagram({
        onRequestEditOperation: function(e) {
            if(e.operation === "addShape") {
                if(e.args.shape.type !== "employee" && e.args.shape.type !== "team") {
                    if(e.reason !== "checkUIElementAvailability")
                        showToast("You can add only a 'Team' or 'Employee' shape.");
                    e.allowed = false;
                }
            }
            else if(e.operation === "changeShapeText") {
                if(e.args.text === "") {
                    if(e.reason !== "checkUIElementAvailability")
                        showToast("A shape text cannot be empty.");
                    e.allowed = false;
                }
            }
            else if(e.operation === "beforeChangeConnectorText") {
                e.allowed = false;
            }
            ...

Angular

app.component.html

app.component.ts

<dx-diagram #diagram id="diagram" (onRequestEditOperation)="requestEditOperationHandler($event)">

requestEditOperationHandler(e) {
    if(e.operation === "addShape") {
        if(e.args.shape.type !== "employee" && e.args.shape.type !== "team") {
            if(e.reason !== "checkUIElementAvailability")
                this.showToast("You can add only a 'Team' or 'Employee' shape.");
            e.allowed = false;
        }
    }
    else if(e.operation === "changeShapeText") {
        if(e.args.text === "") {
            if(e.reason !== "checkUIElementAvailability")
                this.showToast("A shape text cannot be empty.");
            e.allowed = false;
        }
    }
    else if(e.operation === "beforeChangeConnectorText") {
        e.allowed = false;
    }
    ...

Vue

<DxDiagram id="diagram" ref="diagram" @request-edit-operation="onRequestEditOperation" />
...
methods: {
    onRequestEditOperation(e) {
        if(e.operation === 'addShape') {
            if(e.args.shape.type !== 'employee' && e.args.shape.type !== 'team') {
                if(e.reason !== 'checkUIElementAvailability') {
                    this.showToast('You can add only a \'Team\' or \'Employee\' shape.');
                }
            e.allowed = false;
            }
        }
        else if(e.operation === 'changeShapeText') {
            if(e.args.text === '') {
                if(e.reason !== 'checkUIElementAvailability') {
                    this.showToast('A shape text cannot be empty.');
                }
            e.allowed = false;
            }
        }
        else if(e.operation === 'beforeChangeConnectorText') {
            e.allowed = false;
        }
    ...

React

<Diagram id="diagram" onRequestEditOperation={this.onRequestEditOperation} />
...
onRequestEditOperation(e) {
    if(e.operation === 'addShape') {
        if(e.args.shape.type !== 'employee' && e.args.shape.type !== 'team') {
            if(e.reason !== 'checkUIElementAvailability') {
            this.showToast('You can add only a \'Team\' or \'Employee\' shape.');
            }
            e.allowed = false;
        }
    }
    else if(e.operation === 'changeShapeText') {
        if(e.args.text === '') {
            if(e.reason !== 'checkUIElementAvailability') {
            this.showToast('A shape text cannot be empty.');
            }
            e.allowed = false;
        }
    }
    else if(e.operation === 'beforeChangeConnectorText') {
        e.allowed = false;
    }
    ...

ASP.NET Core Controls

@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .OnRequestEditOperation("onRequestEditOperation")
)
...
function onRequestEditOperation(e) {
    if(e.operation === "addShape") {
        if(e.args.shape.type !== "employee" && e.args.shape.type !== "team") {
            if(e.reason !== "checkUIElementAvailability")
                showToast("You can add only a 'Team' or 'Employee' shape.");
            e.allowed = false;
        }
    }
    else if(e.operation === "changeShapeText") {
        if(e.args.text === "") {
            if(e.reason !== "checkUIElementAvailability")
                showToast("A shape text cannot be empty.");
            e.allowed = false;
        }
    }
    else if(e.operation === "beforeChangeConnectorText") {
        e.allowed = false;
    }
    ...

ASP.NET MVC Controls

@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .OnRequestEditOperation("onRequestEditOperation")
)
...
function onRequestEditOperation(e) {
    if(e.operation === "addShape") {
        if(e.args.shape.type !== "employee" && e.args.shape.type !== "team") {
            if(e.reason !== "checkUIElementAvailability")
                showToast("You can add only a 'Team' or 'Employee' shape.");
            e.allowed = false;
        }
    }
    else if(e.operation === "changeShapeText") {
        if(e.args.text === "") {
            if(e.reason !== "checkUIElementAvailability")
                showToast("A shape text cannot be empty.");
            e.allowed = false;
        }
    }
    else if(e.operation === "beforeChangeConnectorText") {
        e.allowed = false;
    }
    ...

Read Only Mode

Set the readOnly property to true to protect the Diagram UI component from edit operations. In this mode, the UI component hides its UI elements: the toolbox, history toolbar, and properties panel.

View Demo