Diagram

Example

<kendo-diagram>
    <connection-defaults></connection-defaults>
    <connections></connections>
    <connections-datasource></connections-datasource>
    <editable></editable>
    <hierarchical-datasource></hierarchical-datasource>
    <layout></layout>
    <pannable />
    <pdf></pdf>
    <selectable></selectable>
    <shape-defaults></shape-defaults>
    <shapes></shapes>
</kendo-diagram>

ChildTags

Tag Name Details
connection-defaults DiagramConnectionDefaultsSettingsTagHelper
connections DiagramConnectionsTagHelper
connections-datasource DataSourceTagHelper
editable DiagramEditableSettingsTagHelper
hierarchical-datasource HierarchicalDataSourceTagHelper
layout DiagramLayoutSettingsTagHelper
pannable DiagramPannableSettingsTagHelper
pdf DiagramPdfSettingsTagHelper
selectable DiagramSelectableSettingsTagHelper
shape-defaults DiagramShapeDefaultsSettingsTagHelper
shapes DiagramShapesTagHelper

Attributes

Attribute Type Description
name String Sets the name of the component.
as-child-component Boolean
datasource-id String The data source id
deferred Boolean Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
is-in-client-template Boolean When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
auto-bind 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.
has-client-component Boolean
on-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.
on-cancel String Fired when the user clicks the "cancel" button in the popup window in case the item was added via a toolbar.
on-change String Fired when an item is added or removed to/from the diagram.
on-click String Fired when the user clicks on a shape or a connection.
on-data-bound 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.
on-drag String Fired when dragging shapes or connection.
on-drag-end String Fired after finishing dragging shapes or connection.
on-drag-start String Fired before starting dragging shapes or connection.
on-edit String Fired when the user edits a shape or connection.
on-item-bounds-change String Fired when the location or size of a shape are changed.
on-item-rotate String Fired when a shape is rotated.
on-mouse-enter String Fired when the mouse enters a shape or a connection.Will not fire for disabled items.
on-mouse-leave String Fired when the mouse leaves a shape or a connection.Will not fire for disabled items.
on-pan String Fired when the user pans the diagram.
on-remove String Fired when the user removes a shape or connection.
on-save String Fired when the user saves a shape or a connection.
on-select String Fired when the user selects one or more items.
on-tool-bar-click String Fired when the user clicks an item in the toolbar.
on-zoom-end String Fired when the user changes the diagram zoom level.
on-zoom-start String Fired when the user starts changing the diagram zoom level.
sanitize-id Boolean
template 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.
template-handler 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.
template-id 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.
template-view IHtmlContent 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.
theme 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 a Sass-based theme.The supported values are: * "sass" - works only when a custom Sass theme is loaded in the page * "black" * "blueopal" * "bootstrap" * "bootstrap-v4" - works only with the Bootstrap-v4 Sass theme loaded in the page * "default" * "default-v2" - works only with the Default-v2 Sass theme loaded in the page * "fiori" * "flat" * "highcontrast" * "material" * "materialBlack" * "metro" * "metroblack" * "moonlight" * "nova" * "office365" * "silver" * "uniform"
zoom Double The default zoom level of the Diagram in percentages.
zoom-max Double The maximum zoom level in percentages. The user will not be allowed to zoom in past this level.
zoom-min Double The minimum zoom level in percentages. The user will not be allowed to zoom out past this level. You can see an example in zoomMax.
zoom-rate Double The zoom step when using the mouse-wheel to zoom in or out.
In this article
Not finding the help you need?