State

This article explains how to save, restore and programmatically control the state of the Telerik Splitter for Blazor.

The splitter instance (@ref) exposes the GetState() and SetState(SplitterState updatedState) methods to let you obtain and update the state.

The SplitterState object that describes the state contains a List<SplitterPaneState> Panes object that describes each pane.

Each SplitterPaneState object has the following information:

• Size - string - the size of the pane
• Collapsed - bool - whether the pane is collapsed

How to save and load the state to/from JSON and the browser local storage, and how to manually change the state of the splitter on a button click

@inject LocalStorage LocalStorage
@inject IJSRuntime JsRuntine

<div>
    <TelerikButton OnClick="@SaveStateToJson">Save State to JSON</TelerikButton>
    <TelerikButton OnClick="@ReloadPage">Reload the Page</TelerikButton>
    <TelerikButton OnClick="@LoadStateFromJson">Load State from JSON</TelerikButton>
    <TelerikButton OnClick="@SetCustomState">Set custom state</TelerikButton>
</div>

<div style="width: 500px; height: 200px;">
    <TelerikSplitter @ref="@Splitter"
                     Width="100%"
                     Height="100%">
        <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);
    }

    async Task LoadStateFromJson()
    {
        var state = await LocalStorage.GetItem<SplitterState>(SplitterStateKey);
        if (state != null)
        {
            Splitter.SetState(state);
        }
    }

    async Task ReloadPage()
    {
        await JsRuntine.InvokeVoidAsync("window.location.reload");
    }

    void SetCustomState()
    {
        SplitterState desiredState = new SplitterState()
        {
            Panes = new List<SplitterPaneState>()
            {
                new SplitterPaneState{ Collapsed = true, Size = "30px" },
                new SplitterPaneState{ Collapsed = false }, // you should always have at least one pane without a size to absorb differences
                new SplitterPaneState{ Collapsed = false, Size = "123px" },
            }
        };

        Splitter.SetState(desiredState);
    }
}

public class LocalStorage
{
    protected IJSRuntime JSRuntimeInstance { get; set; }

    public LocalStorage(IJSRuntime jsRuntime)
    {
        JSRuntimeInstance = jsRuntime;
    }

    public ValueTask SetItem(string key, object data)
    {
        return JSRuntimeInstance.InvokeVoidAsync(
            "localStorage.setItem",
            new object[] {
                key,
                JsonSerializer.Serialize(data)
            });
    }

    public async Task<T> GetItem<T>(string key)
    {
        var data = await JSRuntimeInstance.InvokeAsync<string>("localStorage.getItem", key);
        if (!string.IsNullOrEmpty(data))
        {
            return JsonSerializer.Deserialize<T>(data);
        }

        return default;
    }

    public ValueTask RemoveItem(string key)
    {
        return JSRuntimeInstance.InvokeVoidAsync("localStorage.removeItem", key);
    }
}

You can use the Splitter events to save the component state and restore it on page reload. Learn more at Save and Load the Splitter State.

See Also

• Splitter Overview
• Splitter Events