<kendo:diagram-editable>

Defines how the diagram behaves when the user attempts to edit shape content, create new connections, edit connection labels and so on.

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 via a pop-up editor much like 'editable.template' configuration of the Kendo UI Grid widget.

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 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. See the 'editable.connectionTemplate' for an example.

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 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 for the toolbar.items. 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 via a pop-up editor much like 'editable.template' configuration of the Kendo UI Grid widget.

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. See the 'editable.connectionTemplate' for an example.

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 via a pop-up editor much like 'editable.template' configuration of the Kendo UI Grid widget.

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. See the 'editable.connectionTemplate' for an example.

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy