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.
If you set the ShouldRender field of the event arguments to true, the component will re-render after the event (it will call StateHasChanged()). This can be useful if you need to change its parameters or state during the event execution and especially if you need to execute async logic in the event handler.
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.");
}
}
OnExpand
The OnExpand event fires when a pane is expanded. It receives the index of the pane that was expanded in its event arguments.
If you set the ShouldRender field of the event arguments to true, the component will re-render after the event (it will call StateHasChanged()). This can be useful if you need to change its parameters or state during the event execution and especially if you need to execute async logic in the event handler.
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.");
}
}
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.
If you set the ShouldRender field of the event arguments to true, the component will re-render after the event (it will call StateHasChanged()). This can be useful if you need to change its parameters or state during the event execution and especially if you need to execute async logic in the event handler.
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}.");
}
}