Grid Components - State Management Examples

State Persistence

Save grid state (sort, filter, column order/width) to localStorage and restore on page load.

Try sorting, filtering, or resizing columns, then click "Save State". Refresh the page to see state restored.

View Code

private Grid<Order> gridRef = default!;

[Inject] private IJSRuntime JS { get; set; }
private GridState gridState = new();

protected override async Task OnInitializedAsync()
{
    var json = await JS.InvokeAsync<string>("localStorage.getItem", "gridState");
    if (!string.IsNullOrEmpty(json))
    {
        gridState = JsonSerializer.Deserialize<GridState>(json) ?? new();
    }
}

private async Task SaveState()
{
    // ✅ Get actual state from AG Grid
    gridState = await gridRef.GetStateAsync();
    
    var json = JsonSerializer.Serialize(gridState);
    await JS.InvokeVoidAsync("localStorage.setItem", "gridState", json);
}

State Export/Import

Export grid state as JSON file and import from uploaded JSON.

Import State

Current State JSON

{}

View Code

private async Task ExportState()
{
    var json = JsonSerializer.Serialize(gridState, new JsonSerializerOptions { WriteIndented = true });
    var bytes = Encoding.UTF8.GetBytes(json);
    var base64 = Convert.ToBase64String(bytes);
    await JS.InvokeVoidAsync("downloadFile", "grid-state.json", base64);
}

private async Task ImportState(ChangeEventArgs e)
{
    // Read file and deserialize to GridState
    gridState = JsonSerializer.Deserialize<GridState>(json) ?? new();
}