<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>