<kendo:diagram>

A JSP wrapper for Kendo UI Diagram.

Configuration Attributes

autoBind boolean

If set to false the widget will not bind to the data source during initialization. In this case data binding will occur when the change event of the data source is fired. By default the widget will bind to the data source specified in the configuration.

Example

<kendo:diagram autoBind="autoBind">
</kendo:diagram>

connectionsDataSource java.lang.Object

Defines the data source of the connections.

Example

<kendo:diagram connectionsDataSource="connectionsDataSource">
</kendo:diagram>

editable boolean

Defines how the diagram behaves when the user attempts to edit shape content, create new connections, edit connection labels and so on. Further configuration is available via kendo:diagram-editable.

Example

<kendo:diagram editable="editable">
</kendo:diagram>

pannable boolean

Defines the pannable options. Further configuration is available via kendo:diagram-pannable.

Example

<kendo:diagram pannable="pannable">
</kendo:diagram>

selectable boolean

Defines the selectable options. Further configuration is available via kendo:diagram-selectable.

Example

<kendo:diagram selectable="selectable">
</kendo:diagram>

template java.lang.String

The template which renders the content of the shape when bound to a dataSource. The names you can use in the template correspond to the properties used in the dataSource. For an example, refer to the dataSource topic below.

Example

<kendo:diagram template="template">
</kendo:diagram>

theme java.lang.String

The diagram theme. This can be either a built-in theme or "sass". When set to "sass" the diagram will read the variables from the Sass-based themes.The supported values are: * "sass" - special value, see notes * "black" * "blueopal" * "bootstrap" * "default" * "highcontrast" * "metro" * "metroblack" * "moonlight" * "silver" * "uniform"

Example

<kendo:diagram theme="theme">
</kendo:diagram>

zoom float

The zoom level in percentages.

Example

<kendo:diagram zoom="zoom">
</kendo:diagram>

zoomMax float

The zoom max level in percentages.

Example

<kendo:diagram zoomMax="zoomMax">
</kendo:diagram>

zoomMin float

The zoom min level in percentages.

Example

<kendo:diagram zoomMin="zoomMin">
</kendo:diagram>

zoomRate float

The zoom step when using the mouse-wheel to zoom in or out.

Example

<kendo:diagram zoomRate="zoomRate">
</kendo:diagram>

Configuration JSP Tags

kendo:diagram-connectionDefaults

Defines the defaults of the connections. Whenever a connection is created, the specified connectionDefaults will be used and merged with the (optional) configuration passed through the connection creation method.

More documentation is available at kendo:diagram-connectionDefaults.

Example

<kendo:diagram>
    <kendo:diagram-connectionDefaults></kendo:diagram-connectionDefaults>
</kendo:diagram>

kendo:diagram-connections

Defines the connections configuration.

More documentation is available at kendo:diagram-connections.

Example

<kendo:diagram>
    <kendo:diagram-connections></kendo:diagram-connections>
</kendo:diagram>

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.

More documentation is available at kendo:diagram-editable.

Example

<kendo:diagram>
    <kendo:diagram-editable></kendo:diagram-editable>
</kendo:diagram>

kendo:diagram-layout

The layout of a diagram consists in arranging the shapes (sometimes also the connections) in some fashion in order to achieve an aesthetically pleasing experience to the user. It aims at giving a more direct insight in the information contained within the diagram and its relational structure.On a technical level, layout consists of a multitude of algorithms and optimizations: analysis of the relational structure (loops, multi-edge occurrence...); connectedness of the diagram and the splitting into disconnected components; crossings of connections or bends and length of links. and various ad-hoc calculations which depend on the type of layout. The criteria on which an algorithm is based vary but the common denominator is: a clean separation of connected components (subgraphs); an orderly organization of the shapes in such a way that siblings are close to another, i.e. a tight packing of shapes which belong together (parent of child relationship) or a minimum of connection crossings. Kendo diagram includes three of the most used layout algorithms which should cover most of your layout needs - tree layout, force-directed layout and layered layout. Please, check the type property for more details regarding each type.The generic way to apply a layout is by calling the layout() method on the diagram. The method has a single parameter options. It is an object, which can contain parameters which are specific to the layout as well as parameters customizing the global grid layout. Parameters which apply to other layout algorithms can be included but are overlooked if not applicable to the chose layout type. This means that you can define a set of parameters which cover all possible layout types and simply pass it in the method whatever the layout define in the first parameter.

More documentation is available at kendo:diagram-layout.

Example

<kendo:diagram>
    <kendo:diagram-layout></kendo:diagram-layout>
</kendo:diagram>

kendo:diagram-pannable

Defines the pannable options.

More documentation is available at kendo:diagram-pannable.

Example

<kendo:diagram>
    <kendo:diagram-pannable></kendo:diagram-pannable>
</kendo:diagram>

kendo:diagram-pdf

Configures the export settings for the saveAsPDF method.

More documentation is available at kendo:diagram-pdf.

Example

<kendo:diagram>
    <kendo:diagram-pdf></kendo:diagram-pdf>
</kendo:diagram>

kendo:diagram-selectable

Defines the selectable options.

More documentation is available at kendo:diagram-selectable.

Example

<kendo:diagram>
    <kendo:diagram-selectable></kendo:diagram-selectable>
</kendo:diagram>

kendo:diagram-shapeDefaults

Defines the shape options.

More documentation is available at kendo:diagram-shapeDefaults.

Example

<kendo:diagram>
    <kendo:diagram-shapeDefaults></kendo:diagram-shapeDefaults>
</kendo:diagram>

kendo:diagram-shapes

Defines the shape options.

More documentation is available at kendo:diagram-shapes.

Example

<kendo:diagram>
    <kendo:diagram-shapes></kendo:diagram-shapes>
</kendo:diagram>

Event Attributes

add String

Fired when the user adds new shape or connection.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the add event documentation.

Example

<kendo:diagram add="handle_add">
</kendo:diagram>
<script>
    function handle_add(e) {
        // Code to handle the add event.
    }
</script>

cancel String

Fired when the user clicks the "cancel" button in the popup window in case the item was added via a toolbar.

For additional information check the cancel event documentation.

Example

<kendo:diagram cancel="handle_cancel">
</kendo:diagram>
<script>
    function handle_cancel(e) {
        // Code to handle the cancel event.
    }
</script>

change String

Fired when an item is added or removed to/from the diagram.

For additional information check the change event documentation.

Example

<kendo:diagram change="handle_change">
</kendo:diagram>
<script>
    function handle_change(e) {
        // Code to handle the change event.
    }
</script>

click String

Fired when the user clicks on a shape or a connection.

For additional information check the click event documentation.

Example

<kendo:diagram click="handle_click">
</kendo:diagram>
<script>
    function handle_click(e) {
        // Code to handle the click event.
    }
</script>

dataBound String

Fired when the widget is bound to data from dataDource and connectionsDataSource.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the dataBound event documentation.

Example

<kendo:diagram dataBound="handle_dataBound">
</kendo:diagram>
<script>
    function handle_dataBound(e) {
        // Code to handle the dataBound event.
    }
</script>

drag String

Fired when dragging shapes or connection.

For additional information check the drag event documentation.

Example

<kendo:diagram drag="handle_drag">
</kendo:diagram>
<script>
    function handle_drag(e) {
        // Code to handle the drag event.
    }
</script>

dragEnd String

Fired after finishing dragging shapes or connection.

For additional information check the dragEnd event documentation.

Example

<kendo:diagram dragEnd="handle_dragEnd">
</kendo:diagram>
<script>
    function handle_dragEnd(e) {
        // Code to handle the dragEnd event.
    }
</script>

dragStart String

Fired before starting dragging shapes or connection.

For additional information check the dragStart event documentation.

Example

<kendo:diagram dragStart="handle_dragStart">
</kendo:diagram>
<script>
    function handle_dragStart(e) {
        // Code to handle the dragStart event.
    }
</script>

edit String

Fired when the user edits a shape or connection.

For additional information check the edit event documentation.

Example

<kendo:diagram edit="handle_edit">
</kendo:diagram>
<script>
    function handle_edit(e) {
        // Code to handle the edit event.
    }
</script>

itemBoundsChange String

Fired when the location or size of a shape are changed.

For additional information check the itemBoundsChange event documentation.

Example

<kendo:diagram itemBoundsChange="handle_itemBoundsChange">
</kendo:diagram>
<script>
    function handle_itemBoundsChange(e) {
        // Code to handle the itemBoundsChange event.
    }
</script>

itemRotate String

Fired when a shape is rotated.

For additional information check the itemRotate event documentation.

Example

<kendo:diagram itemRotate="handle_itemRotate">
</kendo:diagram>
<script>
    function handle_itemRotate(e) {
        // Code to handle the itemRotate event.
    }
</script>

mouseEnter String

Fired when the mouse enters a shape or a connection.Will not fire for disabled items.

For additional information check the mouseEnter event documentation.

Example

<kendo:diagram mouseEnter="handle_mouseEnter">
</kendo:diagram>
<script>
    function handle_mouseEnter(e) {
        // Code to handle the mouseEnter event.
    }
</script>

mouseLeave String

Fired when the mouse leaves a shape or a connection.Will not fire for disabled items.

For additional information check the mouseLeave event documentation.

Example

<kendo:diagram mouseLeave="handle_mouseLeave">
</kendo:diagram>
<script>
    function handle_mouseLeave(e) {
        // Code to handle the mouseLeave event.
    }
</script>

pan String

Fired when the user pans the diagram.

For additional information check the pan event documentation.

Example

<kendo:diagram pan="handle_pan">
</kendo:diagram>
<script>
    function handle_pan(e) {
        // Code to handle the pan event.
    }
</script>

remove String

Fired when the user removes a shape or connection.

For additional information check the remove event documentation.

Example

<kendo:diagram remove="handle_remove">
</kendo:diagram>
<script>
    function handle_remove(e) {
        // Code to handle the remove event.
    }
</script>

save String

Fired when the user saved a shape or a connection.

For additional information check the save event documentation.

Example

<kendo:diagram save="handle_save">
</kendo:diagram>
<script>
    function handle_save(e) {
        // Code to handle the save event.
    }
</script>

select String

Fired when the user selects one or more items.

For additional information check the select event documentation.

Example

<kendo:diagram select="handle_select">
</kendo:diagram>
<script>
    function handle_select(e) {
        // Code to handle the select event.
    }
</script>

toolBarClick String

Fired when the user clicks an item in the toolbar.

For additional information check the toolBarClick event documentation.

Example

<kendo:diagram toolBarClick="handle_toolBarClick">
</kendo:diagram>
<script>
    function handle_toolBarClick(e) {
        // Code to handle the toolBarClick event.
    }
</script>

zoomEnd String

Fired when the user changes the diagram zoom level.

For additional information check the zoomEnd event documentation.

Example

<kendo:diagram zoomEnd="handle_zoomEnd">
</kendo:diagram>
<script>
    function handle_zoomEnd(e) {
        // Code to handle the zoomEnd event.
    }
</script>

zoomStart String

Fired when the user starts changing the diagram zoom level.

For additional information check the zoomStart event documentation.

Example

<kendo:diagram zoomStart="handle_zoomStart">
</kendo:diagram>
<script>
    function handle_zoomStart(e) {
        // Code to handle the zoomStart event.
    }
</script>

Event Tags

kendo:diagram-add

Fired when the user adds new shape or connection.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the add event documentation.

Example

<kendo:diagram>
    <kendo:diagram-add>
        <script>
            function(e) {
                // Code to handle the add event.
            }
        </script>
    </kendo:diagram-add>
</kendo:diagram>

kendo:diagram-cancel

Fired when the user clicks the "cancel" button in the popup window in case the item was added via a toolbar.

For additional information check the cancel event documentation.

Example

<kendo:diagram>
    <kendo:diagram-cancel>
        <script>
            function(e) {
                // Code to handle the cancel event.
            }
        </script>
    </kendo:diagram-cancel>
</kendo:diagram>

kendo:diagram-change

Fired when an item is added or removed to/from the diagram.

For additional information check the change event documentation.

Example

<kendo:diagram>
    <kendo:diagram-change>
        <script>
            function(e) {
                // Code to handle the change event.
            }
        </script>
    </kendo:diagram-change>
</kendo:diagram>

kendo:diagram-click

Fired when the user clicks on a shape or a connection.

For additional information check the click event documentation.

Example

<kendo:diagram>
    <kendo:diagram-click>
        <script>
            function(e) {
                // Code to handle the click event.
            }
        </script>
    </kendo:diagram-click>
</kendo:diagram>

kendo:diagram-dataBound

Fired when the widget is bound to data from dataDource and connectionsDataSource.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the dataBound event documentation.

Example

<kendo:diagram>
    <kendo:diagram-dataBound>
        <script>
            function(e) {
                // Code to handle the dataBound event.
            }
        </script>
    </kendo:diagram-dataBound>
</kendo:diagram>

kendo:diagram-drag

Fired when dragging shapes or connection.

For additional information check the drag event documentation.

Example

<kendo:diagram>
    <kendo:diagram-drag>
        <script>
            function(e) {
                // Code to handle the drag event.
            }
        </script>
    </kendo:diagram-drag>
</kendo:diagram>

kendo:diagram-dragEnd

Fired after finishing dragging shapes or connection.

For additional information check the dragEnd event documentation.

Example

<kendo:diagram>
    <kendo:diagram-dragEnd>
        <script>
            function(e) {
                // Code to handle the dragEnd event.
            }
        </script>
    </kendo:diagram-dragEnd>
</kendo:diagram>

kendo:diagram-dragStart

Fired before starting dragging shapes or connection.

For additional information check the dragStart event documentation.

Example

<kendo:diagram>
    <kendo:diagram-dragStart>
        <script>
            function(e) {
                // Code to handle the dragStart event.
            }
        </script>
    </kendo:diagram-dragStart>
</kendo:diagram>

kendo:diagram-edit

Fired when the user edits a shape or connection.

For additional information check the edit event documentation.

Example

<kendo:diagram>
    <kendo:diagram-edit>
        <script>
            function(e) {
                // Code to handle the edit event.
            }
        </script>
    </kendo:diagram-edit>
</kendo:diagram>

kendo:diagram-itemBoundsChange

Fired when the location or size of a shape are changed.

For additional information check the itemBoundsChange event documentation.

Example

<kendo:diagram>
    <kendo:diagram-itemBoundsChange>
        <script>
            function(e) {
                // Code to handle the itemBoundsChange event.
            }
        </script>
    </kendo:diagram-itemBoundsChange>
</kendo:diagram>

kendo:diagram-itemRotate

Fired when a shape is rotated.

For additional information check the itemRotate event documentation.

Example

<kendo:diagram>
    <kendo:diagram-itemRotate>
        <script>
            function(e) {
                // Code to handle the itemRotate event.
            }
        </script>
    </kendo:diagram-itemRotate>
</kendo:diagram>

kendo:diagram-mouseEnter

Fired when the mouse enters a shape or a connection.Will not fire for disabled items.

For additional information check the mouseEnter event documentation.

Example

<kendo:diagram>
    <kendo:diagram-mouseEnter>
        <script>
            function(e) {
                // Code to handle the mouseEnter event.
            }
        </script>
    </kendo:diagram-mouseEnter>
</kendo:diagram>

kendo:diagram-mouseLeave

Fired when the mouse leaves a shape or a connection.Will not fire for disabled items.

For additional information check the mouseLeave event documentation.

Example

<kendo:diagram>
    <kendo:diagram-mouseLeave>
        <script>
            function(e) {
                // Code to handle the mouseLeave event.
            }
        </script>
    </kendo:diagram-mouseLeave>
</kendo:diagram>

kendo:diagram-pan

Fired when the user pans the diagram.

For additional information check the pan event documentation.

Example

<kendo:diagram>
    <kendo:diagram-pan>
        <script>
            function(e) {
                // Code to handle the pan event.
            }
        </script>
    </kendo:diagram-pan>
</kendo:diagram>

kendo:diagram-remove

Fired when the user removes a shape or connection.

For additional information check the remove event documentation.

Example

<kendo:diagram>
    <kendo:diagram-remove>
        <script>
            function(e) {
                // Code to handle the remove event.
            }
        </script>
    </kendo:diagram-remove>
</kendo:diagram>

kendo:diagram-save

Fired when the user saved a shape or a connection.

For additional information check the save event documentation.

Example

<kendo:diagram>
    <kendo:diagram-save>
        <script>
            function(e) {
                // Code to handle the save event.
            }
        </script>
    </kendo:diagram-save>
</kendo:diagram>

kendo:diagram-select

Fired when the user selects one or more items.

For additional information check the select event documentation.

Example

<kendo:diagram>
    <kendo:diagram-select>
        <script>
            function(e) {
                // Code to handle the select event.
            }
        </script>
    </kendo:diagram-select>
</kendo:diagram>

kendo:diagram-toolBarClick

Fired when the user clicks an item in the toolbar.

For additional information check the toolBarClick event documentation.

Example

<kendo:diagram>
    <kendo:diagram-toolBarClick>
        <script>
            function(e) {
                // Code to handle the toolBarClick event.
            }
        </script>
    </kendo:diagram-toolBarClick>
</kendo:diagram>

kendo:diagram-zoomEnd

Fired when the user changes the diagram zoom level.

For additional information check the zoomEnd event documentation.

Example

<kendo:diagram>
    <kendo:diagram-zoomEnd>
        <script>
            function(e) {
                // Code to handle the zoomEnd event.
            }
        </script>
    </kendo:diagram-zoomEnd>
</kendo:diagram>

kendo:diagram-zoomStart

Fired when the user starts changing the diagram zoom level.

For additional information check the zoomStart event documentation.

Example

<kendo:diagram>
    <kendo:diagram-zoomStart>
        <script>
            function(e) {
                // Code to handle the zoomStart event.
            }
        </script>
    </kendo:diagram-zoomStart>
</kendo:diagram>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy