Events
This article explains the events available in the Telerik Splitter for Blazor:
OnCollapse
The OnCollapse
event fires when a pane is collapsed. It receives the index of the pane that was collapsed in its event arguments.
Handling the OnCollapse event of the splitter
Try collapsing any of the panes by clicking the corresponding arrow on the adjacent splitbar
<div style="width: 500px; border: 1px solid red;">
<TelerikSplitter Width="100%"
Height="200px"
OnCollapse="@OnCollapseHandler">
<SplitterPanes>
<SplitterPane Size="200px" Collapsible="true">
<div>pane 0</div>
</SplitterPane>
<SplitterPane Size="250px" Collapsible="true">
<div>pane 1</div>
</SplitterPane>
<SplitterPane Collapsible="true">
<div>pane 2</div>
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
</div>
@code{
void OnCollapseHandler(SplitterCollapseEventArgs args)
{
Console.WriteLine($"pane with index: {args.Index} was just collapsed.");
}
}
For performance reasons, the component does not re-render after this event, even though it is an
EventCallback
. This means that you cannot change its settings such as dimensions, or settings/parameters of child components in it.
OnExpand
The OnExpand
event fires when a pane is expanded. It receives the index of the pane that was expanded in its event arguments.
Handling the OnExpand event of the splitter
Try collapsing and expanding any of the panes by clicking the corresponding arrow on the adjacent splitbar
<div style="width: 500px; border: 1px solid red;">
<TelerikSplitter Width="100%"
Height="200px"
OnExpand="@OnExpandHandler">
<SplitterPanes>
<SplitterPane Size="200px" Collapsible="true">
<div>pane 0</div>
</SplitterPane>
<SplitterPane Size="250px" Collapsible="true">
<div>pane 1</div>
</SplitterPane>
<SplitterPane Collapsible="true">
<div>pane 2</div>
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
</div>
@code{
void OnExpandHandler(SplitterExpandEventArgs args)
{
Console.WriteLine($"pane with index: {args.Index} was just expanded.");
}
}
For performance reasons, the component does not re-render after this event, even though it is an
EventCallback
. This means that you cannot change its settings such as dimensions, or settings/parameters of child components in it.
OnResize
The OnResize
event fires after the user has finished resizing a pane (after the mouse button is released). It fires for each resized pane and receives the index and new size in its event arguments.
Handle the OnResize event of the splitter
Try resizing any of the panes by dragging the splitbars
<div style="width: 500px; border: 1px solid red;">
<TelerikSplitter Width="100%"
Height="200px"
OnResize="@OnResizeHandler">
<SplitterPanes>
<SplitterPane Size="200px" Collapsible="true">
<div>pane 0</div>
</SplitterPane>
<SplitterPane Size="250px" Collapsible="true">
<div>pane 1</div>
</SplitterPane>
<SplitterPane Collapsible="true">
<div>pane 2</div>
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
</div>
@code{
void OnResizeHandler(SplitterResizeEventArgs args)
{
Console.WriteLine($"pane with index: {args.Index} was just resized to {args.Size}.");
}
}
For performance reasons, the component does not re-render after this event, even though it is an
EventCallback
. This means that you cannot change its settings such as dimensions, or settings/parameters of child components in it.