<kendo:diagram-editable>
A set of settings to configure the Diagram behavior when the user attempts to: edit, delete or create shapes and connections.; drag shapes.; resize shapes. or rotate shapes..
Example
<kendo:diagram>
<kendo:diagram-editable></kendo:diagram-editable>
</kendo:diagram>
Configuration Attributes
connectionTemplate java.lang.String
Specifies the connection editor template which shows up when editing the connection. A template can be used to change the default editors for the connection fields or to prevent some fields from being edited by not rendering an editor input for them.
Example
<kendo:diagram-editable connectionTemplate="connectionTemplate">
</kendo:diagram-editable>
drag boolean
Specifies if the shapes and connections can be dragged. Further configuration is available via kendo:diagram-editable-drag.
Example
<kendo:diagram-editable drag="drag">
</kendo:diagram-editable>
remove boolean
Specifies if the shapes and connections can be removed.
Example
<kendo:diagram-editable remove="remove">
</kendo:diagram-editable>
resize boolean
Defines the look-and-feel of the shape resizing handles. Further configuration is available via kendo:diagram-editable-resize.
Example
<kendo:diagram-editable resize="resize">
</kendo:diagram-editable>
rotate boolean
Specifies whether the shapes can be rotated. Note that changing this setting after creating the diagram will have no effect. Further configuration is available via kendo:diagram-editable-rotate.
Example
<kendo:diagram-editable rotate="rotate">
</kendo:diagram-editable>
shapeTemplate java.lang.String
Specifies the shape editor template. You can use it to customize the editing UI of the shape or to display editor controls only for certain fields of the shape data item.
Example
<kendo:diagram-editable shapeTemplate="shapeTemplate">
</kendo:diagram-editable>
Configuration JSP Tags
kendo:diagram-editable-drag
Specifies if the shapes and connections can be dragged.
More documentation is available at kendo:diagram-editable-drag.
Example
<kendo:diagram-editable>
<kendo:diagram-editable-drag></kendo:diagram-editable-drag>
</kendo:diagram-editable>
kendo:diagram-editable-resize
Defines the look-and-feel of the shape resizing handles.
More documentation is available at kendo:diagram-editable-resize.
Example
<kendo:diagram-editable>
<kendo:diagram-editable-resize></kendo:diagram-editable-resize>
</kendo:diagram-editable>
kendo:diagram-editable-rotate
Specifies whether the shapes can be rotated. Note that changing this setting after creating the diagram will have no effect.
More documentation is available at kendo:diagram-editable-rotate.
Example
<kendo:diagram-editable>
<kendo:diagram-editable-rotate></kendo:diagram-editable-rotate>
</kendo:diagram-editable>
kendo:diagram-editable-tools
Specifies the the toolbar tools. Supports all options supported by the toolbar.items property. Predefined tools are: "edit" - The selected item can be edited.; "createShape" - Adds an empty shape data item and a popup window is displayed.; "createConnection" - Adds an empty connection data item and a popup window is displayed.; "undo" - Undoes the previous action.; "redo" - Executes again the previously undone action.; "rotateClockwise" - The selected items can be rotated clockwise. The default rotation value is 90 degree. or "rotateAnticlockwise" - The selected items can be rotated anticlockwise. The default rotation value is 90 degree..
More documentation is available at kendo:diagram-editable-tools.
Example
<kendo:diagram-editable>
<kendo:diagram-editable-tools></kendo:diagram-editable-tools>
</kendo:diagram-editable>
Event Attributes
connectionTemplate String
Specifies the connection editor template which shows up when editing the connection. A template can be used to change the default editors for the connection fields or to prevent some fields from being edited by not rendering an editor input for them.
Example
<kendo:diagram-editable connectionTemplate="handle_connectionTemplate">
</kendo:diagram-editable>
<script>
function handle_connectionTemplate(e) {
// Code to handle the connectionTemplate event.
}
</script>
shapeTemplate String
Specifies the shape editor template. You can use it to customize the editing UI of the shape or to display editor controls only for certain fields of the shape data item.
Example
<kendo:diagram-editable shapeTemplate="handle_shapeTemplate">
</kendo:diagram-editable>
<script>
function handle_shapeTemplate(e) {
// Code to handle the shapeTemplate event.
}
</script>
Event Tags
kendo:diagram-editable-connectionTemplate
Specifies the connection editor template which shows up when editing the connection. A template can be used to change the default editors for the connection fields or to prevent some fields from being edited by not rendering an editor input for them.
Example
<kendo:diagram-editable>
<kendo:diagram-editable-connectionTemplate>
<script>
function(e) {
// Code to handle the connectionTemplate event.
}
</script>
</kendo:diagram-editable-connectionTemplate>
</kendo:diagram-editable>
kendo:diagram-editable-shapeTemplate
Specifies the shape editor template. You can use it to customize the editing UI of the shape or to display editor controls only for certain fields of the shape data item.
Example
<kendo:diagram-editable>
<kendo:diagram-editable-shapeTemplate>
<script>
function(e) {
// Code to handle the shapeTemplate event.
}
</script>
</kendo:diagram-editable-shapeTemplate>
</kendo:diagram-editable>