Blazor Grid — Save and Restore the Layout (v22.1)

As you may already know, the DevExpress Blazor Grid (v22.1x) allows you to save and restore its UI layout settings. A saved layout object includes the following data:

• data pager settings (current page, number of rows per page)
• filter criteria
• settings for individual columns (sort index & direction, position, width, group index, type, etc.)

Essentially, this capability allows your end-users to customize the Blazor Grid to match personal preferences and reload the same layout each time they log into your app.

Demo

Auto Save & Restore – The Details

Our Blazor Grid automatically fires its LayoutAutoSaving event when settings change (so you can auto-save the layout). The event is asynchronous and does not block data grid rendering processes (your users will have a seamless experience).

async Task Grid_LayoutAutoSaving(GridPersistentLayoutEventArgs e) {
    await SetLocalStorageItemAsync(LocalStorageAutomaticSaveKey, JsonSerializer.Serialize(e.Layout));
}

The LayoutAutoLoading event fires when our Blazor Grid loads and allows you to auto-restore the layout.

async Task Grid_LayoutAutoLoading(GridPersistentLayoutEventArgs e) { 
    var json = await GetLocalStorageItemAsync(LocalStorageAutomaticSaveKey); 
    if (!string.IsNullOrEmpty(json)) 
        e.Layout = JsonSerializer.Deserialize<GridPersistentLayout>(json); 
} 

Save & Restore Layout on Demand

The DevExpress Blazor Grid also allows you to handle its state manually by using SaveLayout and LoadLayout methods. For example, you can place two buttons on a page to manage the data grid’s layout: Save Layout and Load Layout.

<DxButton Text="Save Layout" Click="OnSaveClick" />
<DxButton Text="Load Layout" Click="OnLoadClick" />

<DxGrid @ref="Grid"  … >
    @\* … \*@
</DxGrid>

@code {
    IGrid Grid { get; set; }
    GridPersistentLayout Layout { get; set; }

    // ...

    void OnSaveClick() {
        Layout = Grid.SaveLayout();
    } 

    void OnLoadClick() {
        Grid.LoadLayout(Layout);
    }
}

The following GitHub example demonstrates how you can save different Blazor Grid layouts and load these layouts using external buttons: Save and Load Layout Information.

Where to Persist Layout Settings

As you may know, the following are the most common storage locations for a data grid’s layout settings:

• Browser storage
• Server-side database

Browser storage is easier to manage – there is no need to track users or clean up unused records. However, it’s not available during prerendering (unlike a server-side database), because an existing page is not available in the browser during HTTP request prerendering. When working with browser storage, it is necessary to either disable prerendering, or defer page load operations with layout settings until the browser is connected to the circuit.

Please refer to the following article to learn more about state persistence options in Blazor: ASP.NET Core Blazor state management.

Your Feedback Matters

We'd love to know what you think of this feature (save/restore the grid’s layout).