All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Restrict Edit Operations

  • 4 minutes to read

The ASPxDiagram control 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} property to false.

<dx:ASPxDiagram ID="Diagram" runat="server" Width="100%" Height="600px">
    <SettingsEditing 
        AllowAddShape="false" 
        AllowChangeConnection="false" 
        AllowChangeConnectorPoints="false" 
        AllowChangeConnectorText="false" 
        AllowChangeShapeText="false" 
        AllowDeleteConnector="false" 
        AllowDeleteShape="false"
        AllowMoveShape="false" 
        AllowResizeShape="false" />
</dx:ASPxDiagram>

Prohibit Individual Operations

Every time a user attempts an edit operation, the control 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.

Example

function onRequestEditOperation(s, e) {
    if(e.operation === DiagramEditOperation.AddShape) {
        if(e.args.shape.type !== "employee" && e.args.shape.type !== "team") {
            !e.updateUI && showWarning("You can add only a 'Team' or 'Employee' shape.");
            e.allowed = false;
        }
    }
    else if(e.operation === DiagramEditOperation.ResizeShape) {
        if(e.args.newSize.width < 1 || e.args.newSize.height < 0.75) {
            !e.updateUI && showWarning("The shape size is too small.");
            e.allowed = false;
        }
    }
    else if(e.operation === DiagramEditOperation.BeforeChangeShapeText) {
        if(e.args.shape.type === "root") {
            !e.updateUI && showWarning("You cannot change the 'Development' shape's text.");
            e.allowed = false;
        }
    }
    else if(e.operation === DiagramEditOperation.ChangeShapeText) {
        if(e.args.text === "") {
            !e.updateUI && showWarning("A shape's text cannot be empty.");
            e.allowed = false;
        }
    }
    ...
}
<dx:ASPxDiagram ID="Diagram" runat="server" Width="100%" Height="600px">
    <ClientSideEvents RequestEditOperation="onRequestEditOperation" />
</dx:ASPxDiagram>

Run Demo: Editing Restrictions

Read Only Mode

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

<dx:ASPxDiagram ID="Diagram" runat="server" Width="100%" Height="600px" ReadOnly="true">
</dx:ASPxDiagram>

Run Demo: Read Only