Prohibit All Operations of a Specific Type
To prohibit an operation, set the corresponding allow{Operation} editing property to false.
jQuery
$(function() {
var diagram = $("#diagram").dxDiagram({
editing: {
allowAddShape: false,
allowChangeConnection: false,
allowChangeConnectorPoints: false,
allowChangeConnectorText: false,
allowChangeShapeText: false,
allowDeleteConnector: false,
allowDeleteShape: false,
allowMoveShape: false,
allowResizeShape: false,
},
}).dxDiagram("instance");Angular
<dx-diagram #diagram id="diagram" >
<dxo-editing
[allowAddShape]="false"
[allowChangeConnection]="false"
[allowChangeConnectorPoints]="false"
[allowChangeConnectorText]="false"
[allowChangeShapeText]="false"
[allowDeleteConnector]="false"
[allowDeleteShape]="false"
[allowMoveShape]="false"
[allowResizeShape]="false">
</dxo-editing>
</dx-diagram>Vue
<DxDiagram
id="diagram"
ref="diagram">
<DxEditing
:allow-add-shape="false"
:allow-change-connection="false"
:allow-change-connector-points="false"
:allow-change-connector-text="false"
:allow-change-shape-text="false"
:allow-delete-connector="false"
:allow-delete-shape="false"
:allow-move-shape="false"
:allow-resize-shape="false">
/>
</DxDiagram>
...
import { DxDiagram, DxEditing } from 'devextreme-vue/diagram';
export default {
components: {
DxDiagram, DxEditing
},
...React
import Diagram, { Editing } from 'devextreme-react/diagram';
...
<Diagram id="diagram" ref={this.diagramRef} >
<Editing
allowAddShape={false}
allowChangeConnection={false}
allowChangeConnectorPoints={false}
allowChangeConnectorText={false}
allowChangeShapeText={false}
allowDeleteConnector={false}
allowDeleteShape={false}
allowMoveShape={false}
allowResizeShape={false} />
</Diagram>ASP.NET Core Controls
@(Html.DevExtreme().Diagram()
.ID("diagram")
.Editing(e => e
.AllowAddShape(false)
.AllowChangeConnection(false)
.AllowChangeConnectorPoints(false)
.AllowChangeConnectorText(false)
.AllowChangeShapeText(false)
.AllowDeleteConnector(false)
.AllowDeleteShape(false)
.AllowMoveShape(false)
.AllowResizeShape(false)
)
)ASP.NET MVC Controls
@(Html.DevExtreme().Diagram()
.ID("diagram")
.Editing(e => e
.AllowAddShape(false)
.AllowChangeConnection(false)
.AllowChangeConnectorPoints(false)
.AllowChangeConnectorText(false)
.AllowChangeShapeText(false)
.AllowDeleteConnector(false)
.AllowDeleteShape(false)
.AllowMoveShape(false)
.AllowResizeShape(false)
)
)Prohibit Individual Operations
Every time a user attempts an edit operation, the UI component 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 UI component determines the **Paste** command's visibility. | allowAddShape |
| addShapeFromToolbox | The UI component 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 UI component 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 UI component determines the **Cut** and **Delete** commands' visibility. | allowDeleteConnector |
| deleteShape | A user is about to delete a shape / The UI component 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 | DiagramAddShapeArgs |
| addShapeFromToolbox | DiagramAddShapeFromToolboxArgs |
| beforeChangeConnectorText | DiagramBeforeChangeConnectorTextArgs |
| beforeChangeShapeText | DiagramBeforeChangeShapeTextArgs |
| changeConnection | DiagramChangeConnectionArgs |
| changeConnectorPoints | DiagramChangeConnectorPointsArgs |
| changeConnectorText | DiagramChangeConnectorTextArgs |
| changeShapeText | DiagramChangeShapeTextArgs |
| deleteConnector | DiagramDeleteConnectorArgs |
| deleteShape | DiagramDeleteShapeArgs |
| moveShape | DiagramMoveShapeArgs |
| resizeShape | DiagramResizeShapeArgs |
The reason parameter specifies whether the event responds to a user action or requests instruction on related UI command availability.
The
truevalue indicates that the Diagram is updating the UI. Set the allowed option tofalseto hide the UI element associated with the specified operation.The
modelModificationvalue indicates that a user attempts an edit operation. You can specify whether the operation is allowed and display an error message if necessary.
jQuery
$(function() {
$("#diagram").dxDiagram({
onRequestEditOperation: function(e) {
if(e.operation === "addShape") {
if(e.args.shape.type !== "employee" && e.args.shape.type !== "team") {
if(e.reason !== "checkUIElementAvailability")
showToast("You can add only a 'Team' or 'Employee' shape.");
e.allowed = false;
}
}
else if(e.operation === "changeShapeText") {
if(e.args.text === "") {
if(e.reason !== "checkUIElementAvailability")
showToast("A shape text cannot be empty.");
e.allowed = false;
}
}
else if(e.operation === "beforeChangeConnectorText") {
e.allowed = false;
}
...Angular
app.component.html
app.component.ts
<dx-diagram #diagram id="diagram" (onRequestEditOperation)="requestEditOperationHandler($event)">
requestEditOperationHandler(e) {
if(e.operation === "addShape") {
if(e.args.shape.type !== "employee" && e.args.shape.type !== "team") {
if(e.reason !== "checkUIElementAvailability")
this.showToast("You can add only a 'Team' or 'Employee' shape.");
e.allowed = false;
}
}
else if(e.operation === "changeShapeText") {
if(e.args.text === "") {
if(e.reason !== "checkUIElementAvailability")
this.showToast("A shape text cannot be empty.");
e.allowed = false;
}
}
else if(e.operation === "beforeChangeConnectorText") {
e.allowed = false;
}
...Vue
<DxDiagram id="diagram" ref="diagram" @request-edit-operation="onRequestEditOperation" />
...
methods: {
onRequestEditOperation(e) {
if(e.operation === 'addShape') {
if(e.args.shape.type !== 'employee' && e.args.shape.type !== 'team') {
if(e.reason !== 'checkUIElementAvailability') {
this.showToast('You can add only a \'Team\' or \'Employee\' shape.');
}
e.allowed = false;
}
}
else if(e.operation === 'changeShapeText') {
if(e.args.text === '') {
if(e.reason !== 'checkUIElementAvailability') {
this.showToast('A shape text cannot be empty.');
}
e.allowed = false;
}
}
else if(e.operation === 'beforeChangeConnectorText') {
e.allowed = false;
}
...React
<Diagram id="diagram" onRequestEditOperation={this.onRequestEditOperation} />
...
onRequestEditOperation(e) {
if(e.operation === 'addShape') {
if(e.args.shape.type !== 'employee' && e.args.shape.type !== 'team') {
if(e.reason !== 'checkUIElementAvailability') {
this.showToast('You can add only a \'Team\' or \'Employee\' shape.');
}
e.allowed = false;
}
}
else if(e.operation === 'changeShapeText') {
if(e.args.text === '') {
if(e.reason !== 'checkUIElementAvailability') {
this.showToast('A shape text cannot be empty.');
}
e.allowed = false;
}
}
else if(e.operation === 'beforeChangeConnectorText') {
e.allowed = false;
}
...ASP.NET Core Controls
@(Html.DevExtreme().Diagram()
.ID("diagram")
.OnRequestEditOperation("onRequestEditOperation")
)
...
function onRequestEditOperation(e) {
if(e.operation === "addShape") {
if(e.args.shape.type !== "employee" && e.args.shape.type !== "team") {
if(e.reason !== "checkUIElementAvailability")
showToast("You can add only a 'Team' or 'Employee' shape.");
e.allowed = false;
}
}
else if(e.operation === "changeShapeText") {
if(e.args.text === "") {
if(e.reason !== "checkUIElementAvailability")
showToast("A shape text cannot be empty.");
e.allowed = false;
}
}
else if(e.operation === "beforeChangeConnectorText") {
e.allowed = false;
}
...ASP.NET MVC Controls
@(Html.DevExtreme().Diagram()
.ID("diagram")
.OnRequestEditOperation("onRequestEditOperation")
)
...
function onRequestEditOperation(e) {
if(e.operation === "addShape") {
if(e.args.shape.type !== "employee" && e.args.shape.type !== "team") {
if(e.reason !== "checkUIElementAvailability")
showToast("You can add only a 'Team' or 'Employee' shape.");
e.allowed = false;
}
}
else if(e.operation === "changeShapeText") {
if(e.args.text === "") {
if(e.reason !== "checkUIElementAvailability")
showToast("A shape text cannot be empty.");
e.allowed = false;
}
}
else if(e.operation === "beforeChangeConnectorText") {
e.allowed = false;
}
...Feedback