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:
- Configure the DataSource for the remote CRUD operations.
- Configure the
connectionsDataSource
for the remote CRUD operations. If you skip setting theconnectionsDataSource
, the editing support of the Diagram will be turned off. - Declare the
Fields Definition: dataSource
schema. - 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 anid
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 thex
position of the shape. - (Optional)
y
—Accepts numbers. Represents they
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 theid
shape of the from connection. - (Optional)
to
—Accepts numbers. Represents theid
shape of the to connection. - (Optional)
fromX
—Accepts numbers. Represents thex
position of thefrom
connection. Iffrom
is set, this position is not applied. - (Optional)
fromY
—Accepts numbers. Represents they
position of thefrom
connection. Iffrom
is set, this position is not applied. - (Optional)
toX
—Accepts numbers. Represents thex
position of theto
connection. Iffrom
is set, this position is not applied. - (Optional)
toY
—Accepts numbers. Represents they
position of theto
connection. Iffrom
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.