Splitter Events
The Kendo UI for Angular Splitter emits events when the layout changes and when individual panes change size or collapsed state. Use these events to persist pane state, or to refresh components that need a new layout measurement after the user resizes or collapses a pane.
The Splitter exposes one event on the kendo-splitter component and two more events on each kendo-splitter-pane. This distinction is important because layoutChange notifies you that the layout changed, while the pane events provide the pane-specific values that changed.
The following table summarizes the Splitter event surface.
| Event | Emitted by | Event data | Use when |
|---|---|---|---|
layoutChange | kendo-splitter | No pane-specific data | You need to recalculate or redraw content after the pane layout changes. |
sizeChange | kendo-splitter-pane | The new pane size as a string, such as 240px or 50% | You need to persist or react to pane size changes. |
collapsedChange | kendo-splitter-pane | The new collapsed state as true or false | You need to persist or react to pane visibility changes. |
layoutChangedoes not include the updated pane size or collapsed state. When you need those values, handlesizeChangeorcollapsedChangeon the affected pane.
The following example demonstrates how the Splitter and pane events are emitted during resize, collapse, and expand actions.