Blazorise DataGrid: State Management

You are able to manage the state of the DataGrid by using the provided GetState and LoadState methods.

Example

Get And Load State

In the following example,

  • we are using the LoadState method to load the DataGrid state from the LocalStorage if available.
  • We are using the GetState method to save the DataGrid state to the LocalStorage in order to load at a later date.
  • The page checks the LocalStorage on first render and loads the saved state if available.

1 - 10 of 25 items
25 items
#
First Name
Last Name
Email
City
Zip
Date Of Birth
Childrens
Gender
Salary
Active
1SamuelCollierSamuel.Collier62@gmail.comNew Lura91848-471426.08.19703M86 030,41 €
2IrvinZiemannIrvin.Ziemann@gmail.comModestomouth16505-840525.05.19743M61 781,31 €
3GeraldPollichGerald82@yahoo.comTheresashire2861229.04.19691M58 810,75 €
4CoraConnCora27@yahoo.comNorth Art10437-225312.02.19845D84 414,66 €
5AlfonsoD'AmoreAlfonso.DAmore@hotmail.comEast Carolefort87912-393306.11.19835F69 318,29 €
6JessieWilkinsonJessie_Wilkinson@gmail.comMayrafurt3430602.10.19954M78 566,12 €
7GregoryRennerGregory63@hotmail.comWest Marcelleside5789515.03.19781F57 456,82 €
8MaryannHilpertMaryann.Hilpert12@gmail.comBoehmview38859-036801.07.19705D89 153,38 €
9MerlePacochaMerle3@gmail.comNorth Erlingport48154-303424.06.19935F55 349,94 €
10AngelinaWardAngelina42@gmail.comMelyssaview72291-114618.09.19923D73 625,86 €
<Paragraph>
    <Button Color="Color.Primary" Clicked="LoadState">Load State</Button>
    <Button Color="Color.Success" Clicked="SaveState">Save State</Button>
    <Button Color="Color.Light" Clicked="ResetState">Reset State</Button>
</Paragraph>

<DataGrid @ref="dataGridRef"
          TItem="Employee"
          Data="inMemoryData"
          Responsive
          Editable
          Filterable
          ShowPager
          ShowPageSizes
          ShowColumnChooser
          PagerPosition="DataGridPagerPosition.Top">
    <DataGridColumns>
        <DataGridColumn TextAlignment="TextAlignment.Center" TItem="Employee" Field="@nameof( Employee.Id )" Caption="#" Width="Width.Px(60)" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="First Name">
        </DataGridColumn>
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.LastName )" Caption="Last Name" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Email )" Caption="Email" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.City )" Caption="City">
            <CaptionTemplate>
                <Icon Name="IconName.City" /> @context.Caption
            </CaptionTemplate>
        </DataGridColumn>
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Zip )" Caption="Zip">
        </DataGridColumn>
        <DataGridDateColumn TItem="Employee" Field="@nameof( Employee.DateOfBirth )" DisplayFormat="{0:dd.MM.yyyy}" Caption="Date Of Birth" Editable />
        <DataGridNumericColumn TItem="Employee" Field="@nameof( Employee.Childrens )" Caption="Childrens" ReverseSorting="true" Editable Filterable="false" />
        <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Salary )" Caption="Salary" Editable Width="Width.Px(140)" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" TextAlignment="TextAlignment.End">
        </DataGridColumn>
        <DataGridCheckColumn TItem="Employee" Field="@nameof(Employee.IsActive)" Caption="Active" Editable Filterable="false">
            <DisplayTemplate>
                <Check TValue="bool" Value="context.Item.IsActive" Disabled ReadOnly />
            </DisplayTemplate>
        </DataGridCheckColumn>
    </DataGridColumns>
</DataGrid>

@code {
    [Inject] Blazored.LocalStorage.ILocalStorageService LocalStorage { get; set; }
    [Inject] EmployeeData EmployeeData { get; set; }

    private const string STORAGE_KEY = "__DATAGRID_STATE__";
    private DataGrid<Employee> dataGridRef;
    private IEnumerable<Employee> inMemoryData;

    protected override async Task OnInitializedAsync()
    {
        inMemoryData = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 );
        await base.OnInitializedAsync();
    }

    protected async override Task OnAfterRenderAsync( bool firstRender )
    {
        if ( firstRender )
        {
            await LoadState();
        }

        await base.OnAfterRenderAsync( firstRender );
    }

    private async Task ResetState()
    {
        await LocalStorage.RemoveItemAsync( STORAGE_KEY );

        var state = new DataGridState<Employee>()
        {
            Page = 1,
            PageSize = 10,
        };

        await dataGridRef.LoadState( state );
    }

    private async Task LoadState()
    {
        var stateFromLocalStorage = await LocalStorage.GetItemAsync<DataGridState<Employee>>( STORAGE_KEY );

        if ( stateFromLocalStorage is not null )
        {
            //It is of note that we must make sure the reference is contained in the DataGrid Data collection.
            if ( stateFromLocalStorage.SelectedRow is not null )
            {
                stateFromLocalStorage.SelectedRow = inMemoryData.FirstOrDefault( x => x.Id == stateFromLocalStorage.SelectedRow.Id );
            }
            if ( stateFromLocalStorage.EditItem is not null )
            {
                stateFromLocalStorage.EditItem = inMemoryData.FirstOrDefault( x => x.Id == stateFromLocalStorage.EditItem.Id );
            }
            await dataGridRef.LoadState( stateFromLocalStorage );
            return;
        }
    }

    private async Task SaveState()
    {
        var state = await dataGridRef.GetState();
        await LocalStorage.SetItemAsync( STORAGE_KEY, state );
    }
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page