New to Telerik UI for Blazor? Download free 30-day trial

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.

Next Steps

See Also

In this article