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

@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.

  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 control determines the Paste command’s visibility.	AllowAddShape
  AddShapeFromToolbox	A user starts dragging a shape from the toolbox / The control determines the visibility of a shape in the 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 control 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 control determines the Cut and Delete commands’ visibility.	AllowDeleteConnector
  DeleteShape	A user is about to delete a shape / The control 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	ASPxClientDiagramAddShapeEventArgs
  AddShapeFromToolbox	ASPxClientDiagramAddShapeFromToolboxEventArgs
  BeforeChangeConnectorText	ASPxClientDiagramBeforeChangeConnectorTextEventArgs
  BeforeChangeShapeText	ASPxClientDiagramBeforeChangeShapeTextEventArgs
  ChangeConnection	ASPxClientDiagramChangeConnectionEventArgs
  ChangeConnectorPoints	ASPxClientDiagramChangeConnectorPointsEventArgs
  ChangeConnectorText	ASPxClientDiagramChangeConnectorTextEventArgs
  ChangeShapeText	ASPxClientDiagramChangeShapeTextEventArgs
  DeleteConnector	ASPxClientDiagramDeleteConnectorEventArgs
  DeleteShape	ASPxClientDiagramDeleteShapeEventArgs
  ResizeShape	ASPxClientDiagramResizeShapeEventArgs

• The reason parameter specifies the reason why the event fires.

  • The CheckUIElementAvailability value indicates that the control is updating the UI. Set the allowed property 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.

Example

JS

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

@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

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

Run Demo: Read Only