Editing

The Diagram enables you to add tools and shape forms and utilize its layout options.

Setup

• Enabling the editing functionality
• Adding records
• Deleting records
• Configuring the shape model fields
• Configuring the connection model fields

For more information, refer to the article on editing the Kendo UI Diagram.

Enabling Editing

To enable the editing of the Diagram widget:

1. Configure the DataSource for the remote CRUD operations.
2. Configure the connectionsDataSource for the remote CRUD operations. If you skip setting the connectionsDataSource, the editing support of the Diagram will be turned off.
3. Declare the Fields Definition: dataSource schema.
4. Declare the Fields Definition: connectionsDataSource schema.

Adding Records

To enable the insertion of new records, configure the toolbar of the Diagram. The createShape tool is added by default.

Deleting Records

To enable the deletion of records, add a delete tool.

Configuring the Shape Model Fields

Each shape model field is updated upon user interaction.

The shape model provides the following fields:

• (Mandatory) id—Accepts numbers. Represents the unique identifier of the shape. A shape without an id field will not be connected.
• (Optional) type—Accepts strings. Represents the shape type.
• (Optional) text—Accepts strings. Represents the shape text.
• (Optional) x—Accepts numbers. Represents the x position of the shape.
• (Optional) y—Accepts numbers. Represents the y position of the shape.
• (Optional) width—Accepts numbers. Represents the width of the shape.
• (Optional) height—Accepts numbers. Represents the height of the shape.

Configuring the Connection Model Fields

Each connection model field is updated upon user interaction.

The connection model provides the following fields:

• (Mandatory) id—Accepts numbers. Represents the unique identifier of the connection.
• (Optional) text—Accepts strings. Represents the text of the connection.
• (Optional) from—Accepts numbers. Represents the id shape of the from connection.
• (Optional) to—Accepts numbers. Represents the id shape of the to connection.
• (Optional) fromX—Accepts numbers. Represents the x position of the from connection. If from is set, this position is not applied.
• (Optional) fromY—Accepts numbers. Represents the y position of the from connection. If from is set, this position is not applied.
• (Optional) toX—Accepts numbers. Represents the x position of the to connection. If from is set, this position is not applied.
• (Optional) toY—Accepts numbers. Represents the y position of the to connection. If from is set, this position is not applied.
• (Optional) fromConnector—Accepts strings. Represents the name of the source shape connector.
• (Optional) toConnector—Accepts strings. Represents the name of the target shape connector.

Suggested Links

• Kendo UI Diagram for jQuery
• API Reference of the Diagram Widget