# Diagram Events

The KendoReact 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 Prop            | Description                                                                                                 |
| --------------------- | ----------------------------------------------------------------------------------------------------------- |
| `onChange`            | Fired when the diagram content changes, such as when shapes or connections are added, removed, or modified. |
| `onDiagramClick`      | Fired when the user clicks on the diagram canvas (not on a specific shape or connection).                   |
| `onDragStart`         | Fired when a drag operation begins on a shape or connection.                                                |
| `onDrag`              | Fired continuously while dragging shapes or connections within the diagram.                                 |
| `onDragEnd`           | Fired when a drag operation is completed.                                                                   |
| `onShapeBoundsChange` | Fired when the bounds (position or size) of a shape are modified.                                           |
| `onMouseEnter`        | Fired when the mouse pointer enters a shape or connection area.                                             |
| `onMouseLeave`        | Fired when the mouse pointer leaves a shape or connection area.                                             |
| `onPan`               | Fired when the diagram viewport is panned (moved) by the user.                                              |
| `onSelect`            | Fired when shapes or connections are selected or deselected.                                                |
| `onTooltipShow`       | Fired when a tooltip displays for a shape or connection.                                                    |
| `onTooltipHide`       | Fired when a tooltip hides.                                                                                 |
| `onZoomStart`         | Fired when a zoom operation begins.                                                                         |
| `onZoomEnd`           | Fired when a zoom operation is completed.                                                                   |

The following example demonstrates all available events in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/diagram/events/basic/source.txt)

## See Also

* [Diagram Shapes](https://www.telerik.com/kendo-react-ui-develop/components/diagram/shapes)
* [Diagram Connections](https://www.telerik.com/kendo-react-ui-develop/components/diagram/connections)
* [Diagram Layouts](https://www.telerik.com/kendo-react-ui-develop/components/diagram/layouts)
* [Diagram API Reference](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api)