Blazor Persistência de estado de grade

    A persistência de estado Ignite UI for Blazor em Blazor grade permite que os desenvolvedores salvem e restaurem facilmente o estado da grade. Quando o IgbGridState é aplicado no Blazor IgbGrid, ele expõe os métodos e ApplyStateFromStringAsync que os GetStateAsStringAsync desenvolvedores podem usar para obter persistência de estado em qualquer cenário.

    Recursos suportados

    IgbGridState Suporta 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
      • Column properties defined by the IColumnState interface.

    Uso

    O GetStateAsStringAsync retorna uma string JSON serializada, para que os desenvolvedores possam simplesmente pegá-la e salvá-la em qualquer armazenamento de dados (banco de dados, nuvem, navegador localStorage, 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.

    <IgbGrid> <IgbGridState @ref="gridState"></IgbGridState> </IgbGrid> @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 recurso encontrado na string JSON ou recursos especificados como segundo argumento.

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

    O Options objeto implementa a IgbGridStateOptions interface, ou seja, para cada chave, que é o nome de uma determinada característica, há o valor booleano indicando se esse estado de característica será rastreado. GetStateAsStringAsync Os métodos não colocarão o estado desses recursos no valor retornado e ApplyStateFromStringAsync os métodos não restaurarão o estado deles.

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

    As APIs de ponto único simples de usar permitem obter 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 navegador LocalStorage toda vez que o usuário sair da página atual. Sempre que o usuário retornar à página principal, o estado da grade será restaurado. Não há mais necessidade de configurar essas expressões complexas de filtragem e classificação avançadas todas as vezes para obter os dados desejados - faça isso uma vez e faça com que o código abaixo faça o resto para seus usuários:

    @using IgniteUI.Blazor.Controls @using Newtonsoft.Json @implements IDisposable @inject IJSRuntime JS @inject NavigationManager Navigation <IgbGrid 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> </IgbGrid> @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

    Limitações

    • GetStateAsString usa o método JSON.stringify() para converter os objetos originais em uma string JSON. JSON.stringify() não suporta Functions, é por isso que o IgbGridState componente ignorará as colunas Formatter, Filters, Summaries, SortStrategy, CellClasses,, CellStyles,e HeaderTemplate​ ​BodyTemplate propriedades.

    Recursos adicionais