State Persistence in Blazor

22 Oct 20252 minutes to read

The Syncfusion^® Blazor library supports persisting a component’s state across page refreshes and navigation. To enable this feature, set the EnablePersistence property to true on the target component. The component’s state is saved to the browser’s localStorage when the page unloads. The following example enables persistence for the Grid component.

NOTE

The state of a component will be retained during navigation or refreshment based on the ID. Make sure to set an ID for the component to store the component’s state in the browser.

RAZOR

@using Syncfusion.Blazor.Grids

<SfGrid  ID="grid" EnablePersistence="true" AllowPaging="true" DataSource="@Orders">
    <GridPageSettings PageSize="8"></GridPageSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Width="100"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Width="100"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) Format="C2" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code {
    public List<Order> Orders { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        Orders = Enumerable.Range(1, 25).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

State persistence supported components and properties

The following table lists the Syncfusion^® Blazor components that support state persistence and the properties saved in localStorage.

Component Name	Properties
SfGrid	Columns FilterSettings SortSettings GroupSettings PageSettings SearchSettings
SfMaps	ZoomSettings CenterPosition
SfPivotView	DataSourceSettings GridSettings ChartSettings DisplayOptions
SfTreeGrid	Columns FilterSettings PageSettings SearchSettings SortSettings