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
Set the corresponding Allow{Operation} property to false to prohibit an edit operation.
<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.
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 The control 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 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.
The reason parameter specifies whether the event responds to a user action or requests instruction on related UI command availability.
The CheckUIElementAvailability value indicates that the control is updating the UI. Set the allowed property to
falseto hide the UI element associated with the specified operation.The ModelModification value indicates if a user attempts an edit operation. You can specify whether to allow the operation or display an error message if a user tries to execute a prohibited action.
Example
function onRequestEditOperation(s, e) {
if(e.operation === DiagramEditOperation.AddShape) {
if(e.args.shape.type !== "employee" && e.args.shape.type !== "team") {
if(e.reason !== DiagramRequestEditOperationReason.CheckUIElementAvailability)
showWarning("You can add only a 'Team' or an 'Employee' shape.");
e.allowed = false;
}
}
else if(e.operation === DiagramEditOperation.ResizeShape) {
if(e.args.newSize.width < 1 || e.args.newSize.height < 0.75) {
if(e.reason !== DiagramRequestEditOperationReason.CheckUIElementAvailability)
showWarning("The shape size is too small.");
e.allowed = false;
}
}
else if(e.operation === DiagramEditOperation.BeforeChangeShapeText) {
if(e.args.shape.type === "root") {
if(e.reason !== DiagramRequestEditOperationReason.CheckUIElementAvailability)
showWarning("You cannot change the 'Development' shape's text.");
e.allowed = false;
}
}
else if(e.operation === DiagramEditOperation.ChangeShapeText) {
if(e.args.text === "") {
if(e.reason !== DiagramRequestEditOperationReason.CheckUIElementAvailability)
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>
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>