Diagram

Example

Razor

<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>
    <shape-template></shape-template>
    <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
shape-template	TemplateTagHelper
shapes	DiagramShapesTagHelper

Attributes

Attribute	Type	Description
name	String	Sets the name of the component.
as-module	Boolean	Specifies whether the initialization script of the component will be rendered as a JavaScript module.
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.
deferred	Boolean	Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
datasource-id	String	The data source id
on-add	String	The name of the JavaScript function that will handle the add event. 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	The name of the JavaScript function that will handle the cancel event. Fired when the user clicks the "cancel" button in the popup window in case the item was added via a toolbar.
on-change	String	The name of the JavaScript function that will handle the change event. Fired when an item is added or removed to/from the diagram.
on-click	String	The name of the JavaScript function that will handle the click event. Fired when the user clicks on a shape or a connection.
on-data-bound	String	The name of the JavaScript function that will handle the dataBound event. 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	The name of the JavaScript function that will handle the drag event. Fired when dragging shapes or connection.
on-drag-end	String	The name of the JavaScript function that will handle the dragEnd event. Fired after finishing dragging shapes or connection.
on-drag-start	String	The name of the JavaScript function that will handle the dragStart event. Fired before starting dragging shapes or connection.
on-edit	String	The name of the JavaScript function that will handle the edit event. Fired when the user edits a shape or connection.
on-item-bounds-change	String	The name of the JavaScript function that will handle the itemBoundsChange event. Fired when the location or size of a shape are changed.
on-item-rotate	String	The name of the JavaScript function that will handle the itemRotate event. Fired when a shape is rotated.
on-mouse-enter	String	The name of the JavaScript function that will handle the mouseEnter event. Fired when the mouse enters a shape or a connection.Will not fire for disabled items.
on-mouse-leave	String	The name of the JavaScript function that will handle the mouseLeave event. Fired when the mouse leaves a shape or a connection.Will not fire for disabled items.
on-pan	String	The name of the JavaScript function that will handle the pan event. Fired when the user pans the diagram.
on-remove	String	The name of the JavaScript function that will handle the remove event. Fired when the user removes a shape or connection.
on-save	String	The name of the JavaScript function that will handle the save event. Fired when the user saves a shape or a connection.
on-select	String	The name of the JavaScript function that will handle the select event. Fired when the user selects one or more items.
on-tool-bar-click	String	The name of the JavaScript function that will handle the toolBarClick event. Fired when the user clicks an item in the toolbar.
on-zoom-end	String	The name of the JavaScript function that will handle the zoomEnd event. Fired when the user changes the diagram zoom level.
on-zoom-start	String	The name of the JavaScript function that will handle the zoomStart event. Fired when the user starts changing the diagram zoom level.
script-attributes	IDictionary<String,Object>	Sets the attributes that will be added to the script tag of the component's initialization script.
template	String	Represents a collection of templates defined for the component.
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. This option expects the name of a JavaScript function that will be called to return the template.
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. This option expects the ID of the script element that contains the template.
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. This option expects the instance containing the created HTML.
theme	String	The diagram theme. With versions prior to R1 2023 this can be either the respective LESS theme from the list below or "sass". When set to "sass" the diagram will read the variables from a Sass-based theme.Note: Since Q2 2024 release, the default value for the theme property is "sass" instead of "default". It is recommended to use "sass" with version Q2 2024 or later.The supported values are: * "sass" * "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.