Events

This article explains the events available in the Telerik Splitter for Blazor:

• OnCollapse
• OnExpand
• OnResize

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}.");
    }
}

See Also

• Splitter Overview