<kendo:diagram-shape>

Defines the shape options.

Example

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

Configuration Attributes

editable boolean

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

Example

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

fill java.lang.String

Defines the background fill options of the shape. Further configuration is available via kendo:diagram-shape-fill.

Example

<kendo:diagram-shape fill="fill">
</kendo:diagram-shape>

height float

Defines the height of the shape when added to the Diagram.

Example

<kendo:diagram-shape height="height">
</kendo:diagram-shape>

id java.lang.String

The unique identifier for a Shape. The id value is used to identify shapes in connection configurations. The connection to and from properties usually point to shape id values.

Example

<kendo:diagram-shape id="id">
</kendo:diagram-shape>

minHeight float

Defines the minimum height the shape should have, that is, it cannot be resized to a value smaller than the given one.

Example

<kendo:diagram-shape minHeight="minHeight">
</kendo:diagram-shape>

minWidth float

Defines the minimum width the shape should have, that is, it cannot be resized to a value smaller than the given one. See example at shapes.minHeight.

Example

<kendo:diagram-shape minWidth="minWidth">
</kendo:diagram-shape>

path java.lang.String

The path option of a Shape is a description of a custom geometry. The format follows the standard SVG format (https://www.w3.org/TR/SVG/paths.html#PathData "SVG Path data.").

Example

<kendo:diagram-shape path="path">
</kendo:diagram-shape>

source java.lang.String

The source of the shape image. Applicable when the type is set to "image".

Example

<kendo:diagram-shape source="source">
</kendo:diagram-shape>

type java.lang.String

Specifies the type of the Shape using any of the built-in shape type. "rectangle" - The default option; "circle" - A circle/ellipse or "image" - An image.

Example

<kendo:diagram-shape type="type">
</kendo:diagram-shape>

visual java.lang.String

A function returning a visual element to render for this shape. For more information, refer to visual.

Example

<kendo:diagram-shape visual="visual">
</kendo:diagram-shape>

width float

Defines the width of the shape when added to the Diagram.

Example

<kendo:diagram-shape width="width">
</kendo:diagram-shape>

x float

Defines the x-coordinate of the shape when added to the Diagram. Does not take effect if the Diagram is using a pre-defined layout.

Example

<kendo:diagram-shape x="x">
</kendo:diagram-shape>

y float

Defines the y-coordinate of the shape when added to the Diagram. Does not take effect if the Diagram is using a pre-defined layout. You can see an example at shapes.x

Example

<kendo:diagram-shape y="y">
</kendo:diagram-shape>

Configuration JSP Tags

kendo:diagram-shape-connectorDefaults

Defines default options for all connectors belonging to a given shape.

More documentation is available at kendo:diagram-shape-connectorDefaults.

Example

<kendo:diagram-shape>
    <kendo:diagram-shape-connectorDefaults></kendo:diagram-shape-connectorDefaults>
</kendo:diagram-shape>

kendo:diagram-shape-connectors

Defines the connectors available in the shape. A connector is the point in the shape where a connection between this shape and another one can originate from or end.

More documentation is available at kendo:diagram-shape-connectors.

Example

<kendo:diagram-shape>
    <kendo:diagram-shape-connectors></kendo:diagram-shape-connectors>
</kendo:diagram-shape>

kendo:diagram-shape-content

Defines the shapes content settings.

More documentation is available at kendo:diagram-shape-content.

Example

<kendo:diagram-shape>
    <kendo:diagram-shape-content></kendo:diagram-shape-content>
</kendo:diagram-shape>

kendo:diagram-shape-editable

Defines the shape editable options.

More documentation is available at kendo:diagram-shape-editable.

Example

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

kendo:diagram-shape-fill

Defines the background fill options of the shape.

More documentation is available at kendo:diagram-shape-fill.

Example

<kendo:diagram-shape>
    <kendo:diagram-shape-fill></kendo:diagram-shape-fill>
</kendo:diagram-shape>

kendo:diagram-shape-hover

Defines the hover configuration.

More documentation is available at kendo:diagram-shape-hover.

Example

<kendo:diagram-shape>
    <kendo:diagram-shape-hover></kendo:diagram-shape-hover>
</kendo:diagram-shape>

kendo:diagram-shape-rotation

Specifies a rotation angle for the shape.

More documentation is available at kendo:diagram-shape-rotation.

Example

<kendo:diagram-shape>
    <kendo:diagram-shape-rotation></kendo:diagram-shape-rotation>
</kendo:diagram-shape>

kendo:diagram-shape-stroke

Defines the shape border stroke configuration.

More documentation is available at kendo:diagram-shape-stroke.

Example

<kendo:diagram-shape>
    <kendo:diagram-shape-stroke></kendo:diagram-shape-stroke>
</kendo:diagram-shape>

Event Attributes

visual String

A function returning a visual element to render for this shape. For more information, refer to visual.

Example

<kendo:diagram-shape visual="handle_visual">
</kendo:diagram-shape>
<script>
    function handle_visual(e) {
        // Code to handle the visual event.
    }
</script>

Event Tags

kendo:diagram-shape-visual

A function returning a visual element to render for this shape. For more information, refer to visual.

Example

<kendo:diagram-shape>
    <kendo:diagram-shape-visual>
        <script>
            function(e) {
                // Code to handle the visual event.
            }
        </script>
    </kendo:diagram-shape-visual>
</kendo:diagram-shape>
In this article
Not finding the help you need?