Restrict Edit Operations

Dec 18, 2020
4 minutes to read

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

Prohibit All Operations of a Specific Type

To prohibit an operation, set the corresponding SettingsEditing.Allow{Operation} property to false.

Razor

cshtml

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
    settings.SettingsEditing.AllowAddShape = false;
    settings.SettingsEditing.AllowChangeConnection = false;
    settings.SettingsEditing.AllowChangeConnectorPoints = false;
    settings.SettingsEditing.AllowChangeConnectorText = false;
    settings.SettingsEditing.AllowChangeShapeText = false;
    settings.SettingsEditing.AllowDeleteConnector = false;
    settings.SettingsEditing.AllowDeleteShape = false;
    settings.SettingsEditing.AllowMoveShape = false;
    settings.SettingsEditing.AllowResizeShape = false;
    ...

Prohibit Individual Operations

Every time a user attempts an edit operation, the extension 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.
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.
The reason parameter specifies the reason why the event fires.

Example

javascript

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;
        }
    }
    ...
}

Razor

cshtml

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
    settings.ClientSideEvents.RequestEditOperation = "onRequestEditOperation";
    ...

Run Demo: Editing Restrictions

Read Only Mode

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

Razor

cshtml

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
    settings.ReadOnly = true;
}).Import(Model).GetHtml()

Run Demo: Read Only