Blazor Pivot Grid State Persistence

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

    Supported Features

    IgbGridState dá suporte ao salvamento e à restauração do estado dos seguintes recursos:

    Usage

    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.

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

@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

<IgbPivotGrid 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>
</IgbPivotGrid>

@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]);
        }
    }
}

    Restoring Pivot Configuration

    IgbGridState não persistirá funções de dimensão dinâmica, formatadores de valor, etc. por padrão (consulte Limitações). A restauração de qualquer um deles pode ser obtida com código no nível do aplicativo. O IgbPivotGrid expõe dois eventos que podem ser usados para definir quaisquer funções personalizadas que você tenha na configuração: DimensionInit e ValueInit. Vamos mostrar como fazer isso:

    • Atribua manipuladores de eventos para os DimensionInit eventos e ValueInit:
        <IgbPivotGrid
        @ref="grid"
        Width="95%"
        Height="500px"
        PivotConfiguration="PivotConfiguration"
        ValueInitScript="OnValueInit">
    </IgbPivotGrid>

    Os DimensionInit eventos and ValueInit são emitidos para cada valor e dimensão definidos na PivotConfiguration propriedade.

    • No manipulador de ValueInit eventos, defina todos os agregadores, formatadores e estilos personalizados:
    // In Javascript
const totalSale = (members, data) => {
    return data.reduce((accumulator, value) => accumulator + value.ProductUnitPrice * value.NumberOfUnits, 0);
};

const totalMin = (members, data) => {
    let min = 0;
    if (data.length === 1) {
        min = data[0].ProductUnitPrice * data[0].NumberOfUnits;
    } else if (data.length > 1) {
        const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits);
        min = mappedData.reduce((a, b) => Math.min(a, b));
    }
    return min;
};

const totalMax = (members, data) => {
    let max = 0;
    if (data.length === 1) {
        max = data[0].ProductUnitPrice * data[0].NumberOfUnits;
    } else if (data.length > 1) {
        const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits);
        max = mappedData.reduce((a, b) => Math.max(a, b));
    }
    return max;
};

igRegisterScript("OnValueInit", (args) => {
    const value = args.detail;
    if (value.member === "AmountOfSale") {
      value.aggregate.aggregator = totalSale;
      value.aggregateList?.forEach((aggr) => {
        switch (aggr.key) {
          case "SUM":
            aggr.aggregator = totalSale;
            break;
          case "MIN":
            aggr.aggregator = totalMin;
            break;
          case "MAX":
            aggr.aggregator = totalMax;
            break;
        }
      });
    }
}, false);

    Demo

    Limitations

    • GetState usa o método JSON.stringify() para converter os objetos originais em uma string JSON. JSON.stringify() não oferece suporte a funções, é por isso que a IgbGridState diretiva ignorará a dimensão MemberFunction dinâmica, os valores Member dinâmicos, Formatter as funções Styles personalizadas Aggregate e as estratégias de configuração dinâmica: ColumnStrategy e RowStrategy.