Diagram Events

The Kendo UI for Angular Diagram provides a comprehensive set of events that enable you to respond to user interactions, shape modifications, and other diagram-related activities. This article describes all available events and how to handle them.

Event	Description
change	Fired when the diagram content changes, such as when shapes or connections are added, removed, or modified.
diagramClick	Fired when the user clicks on the diagram canvas (not on a specific shape or connection).
drag	Fired continuously while dragging shapes or connections within the diagram.
dragEnd	Fired when a drag operation is completed.
dragStart	Fired when a drag operation begins on a shape or connection.
shapeBoundsChange	Fired when the bounds (position or size) of a shape are modified.
mouseEnter	Fired when the mouse pointer enters a shape or connection area.
mouseLeave	Fired when the mouse pointer leaves a shape or connection area.
pan	Fired when the diagram viewport is panned (moved) by the user.
select	Fired when shapes or connections are selected or deselected.
zoomEnd	Fired when a zoom operation is completed.
zoomStart	Fired when a zoom operation begins.

The following example demonstrates all available events in action.

Change Theme

Theme

Loading ...

See Also

• Diagram Shapes
• Diagram Connections
• Diagram Layouts
• Diagram API Reference