Blazor Tree Grid State Persistence

A Ignite UI for Blazor State Persistence in Blazor Tree Grid permite que os desenvolvedores salvem e restaurem facilmente o estado da grade. Quando oIgbGridState é aplicado no BlazorIgbTreeGrid, ele expõe osGetStateAsStringAsync métodos eApplyStateFromStringAsync que os desenvolvedores podem usar para alcançar persistência de estado em qualquer cenário.

Supported Features

IgbGridStateSuporta salvar e restaurar o estado dos seguintes recursos:

Sorting
Filtering
Filtragem avançada
Paginação
CellSelection
Seleção de linha
ColumnSelection
RowPinning
Expansão
AgruparPor
Columns
- Multi column headers
- Ordem das colunas
- Propriedades da coluna definidas pelaIColumnState interface.

Usage

EleGetStateAsStringAsync retorna uma string JSON serializada, então os desenvolvedores podem simplesmente pegá-la e salvá-la em qualquer armazenamento de dados (banco de dados, nuvem, localStorage do navegador, etc).

O desenvolvedor pode optar por obter apenas o estado de um determinado recurso/recursos, passando uma matriz com nomes de recursos como argumento. A matriz vazia resultará no uso das opções de estado padrão.

<IgbTreeGrid>
    <IgbGridState @ref="gridState"></IgbGridState>
</IgbTreeGrid>

@code {
    // get all features` state in a serialized JSON string
    string stateString = gridState.GetStateAsStringAsync(new string[0]);

    // get the sorting and filtering expressions
    string sortingFilteringStates = gridState.GetStateAsStringAsync(new string[] { "sorting", "filtering" });
}

ApplyStateFromStringAsync- O método aceita uma string JSON serializada como argumento e restaurará o estado de cada característica encontrada na string JSON ou características especificadas como segundo argumento.

gridState.ApplyStateFromStringAsync(gridStateString, new string[0]);
gridState.ApplyStateFromStringAsync(sortingFilteringStates, new string[0])

OOptions objeto implementa aIgbGridStateOptions interface, ou seja, para cada chave, que é o nome de uma determinada característica, existe o valor booleano indicando se esse estado da característica será rastreado.GetStateAsStringAsync Os métodos não colocam o estado desses recursos no valor retornado eApplyStateFromStringAsync os métodos não restauram o estado para eles.

gridState.Options = new IgbGridStateOptions
    {
        CellSelection = false,
        Sorting = false
    };

As APIs simples de usar permitem alcançar uma funcionalidade completa de persistência de estado em apenas algumas linhas de código. Copie e cole o código abaixo– ele salvará o estado da grade no objeto do navegadorLocalStorage toda vez que o usuário sair da página atual. Sempre que o usuário retorna à página principal, o estado da grade será restaurado. Não é mais necessário configurar aquelas expressões avançadas de filtragem e ordenação toda vez para obter os dados que você quer – faça isso uma vez e o código abaixo faça o restante para seus usuários:

@using IgniteUI.Blazor.Controls
@using Newtonsoft.Json
@implements IDisposable

@inject IJSRuntime JS
@inject NavigationManager Navigation

<IgbTreeGrid Rendered="OnGridRendered">
    <IgbGridState @ref="gridState"></IgbGridState>
    <IgbColumn Field="ContactName" Header="Name" MinWidth="200px" ></IgbColumn>
    <IgbColumn Field="ContactTitle" Header="Title" MinWidth="200px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
    <IgbColumn Field="CompanyName" Header="Company" MinWidth="200px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
</IgbTreeGrid>

@code {
    protected override void OnAfterRender(bool firstRender)
    {
        Navigation.LocationChanged += OnLocationChanged;
    }

    void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        SaveGridState();
    }

    void IDisposable.Dispose()
    {
        // Unsubscribe from the event when our component is disposed
        Navigation.LocationChanged -= OnLocationChanged;
    }

    void OnGridRendered()
    {
        RestoreGridState();
    }

    async void SaveGridState() {
        string state = gridState.GetStateAsStringAsync(new string[0]);
        await JS.InvokeVoidAsync("window.localStorage.setItem", "grid-state", state);
    }

    async void RestoreGridState() {
        string state = await JS.InvokeAsync<string>("window.localStorage.getItem", "grid-state");
        if (state) {
            gridState.ApplyStateFromStringAsync(state, new string[0]);
        }
    }
}

Demo

Limitations

GetStateAsStringo método JSON.stringify() para converter os objetos originais em uma string JSON. JSON.stringify() não suporta Funções, por isso oIgbGridState componente ignora as colunasFormatter,FiltersSummaries,SortStrategy,,CellClasses,,CellStyles eHeaderTemplateBodyTemplate as propriedades.