Restrict Edit Operations
- 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
.
@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 Add Shape A user is about to add a shape / The control determines the Paste command’s visibility. Allow Add Shape Add Shape From Toolbox A user starts dragging a shape from the toolbox / The control determines the visibility of a shape in the context toolbox. Allow Add Shape Before Change Connector Text A user is about to edit a connector’s text. Allow Change Connector Text Before Change Shape Text A user is about to edit a shape’s text. Allow Change Shape Text Change Connection A user is about to link or delink a connector from a shape / The control determines a connection point’s visibility. Allow Change Connection Change Connector Points A user changed a connector’s points. Allow Change Connector Points Change Connector Text A user changed a connector’s text. Allow Change Connector Text Change Shape Text A user changed a shape’s text. Allow Change Shape Text Delete Connector A user is about to delete a connector / The control determines the Cut and Delete commands’ visibility. Allow Delete Connector Delete Shape A user is about to delete a shape / The control determines the visibility of the Cut and Delete commands. Allow Delete Shape Move Shape A user moved a shape. Allow Move Shape Resize Shape A user resized a shape. Allow Resize Shape 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.
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
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;
}
}
...
}
@Html.DevExpress().Diagram(settings => {
settings.Name = "Diagram";
settings.ClientSideEvents.RequestEditOperation = "onRequestEditOperation";
...
#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.
@Html.DevExpress().Diagram(settings => {
settings.Name = "Diagram";
settings.ReadOnly = true;
}).Import(Model).GetHtml()