New to Telerik UI for BlazorStart a free 30-day trial

Save and Load the Splitter State

Environment

ProductSplitter for Blazor

Description

I want to save the Splitter state when it is expanded or collapsed, and then automatically load it when the page is reloaded.

Solution

Implement this scenario in two steps:

Save the Splitter state

Handle the Splitter events to save its state in the LocalStorage when the user changes the component layout:

Load the Splitter state

Set the saved state from the browser local storage. It is important to perform this action in OnAfterRender(Async), as the component references are typically unavailable earlier. If you try setting the state in OnInitialized(Async), the Splitter reference may still be null.

The example below demonstrates the described approach.

RAZOR
@inject LocalStorage LocalStorage

<div style="width: 500px; height: 200px;">
    <TelerikSplitter @ref="@Splitter"
                     Width="100%"
                     Height="100%"
                     OnCollapse="@SaveStateToJson"
                     OnExpand="@SaveStateToJson"
                     OnResize="@SaveStateToJson">
        <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 {
    const string SplitterStateKey = "SplitterStorageStateKey";
    TelerikSplitter Splitter { get; set; }

    async Task SaveStateToJson()
    {
        var state = Splitter.GetState();
        await LocalStorage.SetItem(SplitterStateKey, state);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var state = await LocalStorage.GetItem<SplitterState>(SplitterStateKey);
            if (state != null)
            {
                Splitter.SetState(state);
            }
        }
    }
}