Web Components Persistência do estado da grade dinâmica

    A persistência de estado Ignite UI for Web Components em Web Components grade dinâmica permite que os desenvolvedores salvem e restaurem facilmente o estado da grade. Quando o IgcGridState é aplicado no Web Components IgcPivotGridComponent, ele expõe os GetState métodos e GetStateAsString​ ​ApplyState​ ​ApplyStateFromString que os desenvolvedores podem usar para obter persistência de estado em qualquer cenário.

    Supported Features

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

    Usage

    O getState método retorna o estado da grade em um IgcGridStateInfo objeto, contendo todas as informações de estado. Etapas adicionais podem ser necessárias para salvá-lo.

    O GetStateAsString 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.

    <igc-pivot-grid id="grid">
    <igc-grid-state id="gridState"></igc-grid-state>
</igc-pivot-grid>

    var gridState = document.getElementById('gridState') as IgcGridStateComponent;

// get an `IgcGridStateInfo` object, containing all features original state objects, as returned by the grid public API
const state: IgcGridStateInfo = gridState.getState();

// get all features` state in a serialized JSON string
const stateString: string = gridState.getStateAsString();

// get the sorting and filtering expressions
const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']);

    ApplyState- O método aceita um IgcGridStateInfo objeto como argumento e restaurará o estado de cada recurso encontrado no objeto ou recursos especificados como segundo argumento.

    ApplyStateFromString- 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.applyState(gridState);
gridState.applyStateFromString(gridStateString);
gridState.applyState(sortingFilteringStates)

    O Options objeto implementa a IgcGridStateOptions 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. GetState / GetStateAsString methods não colocará o estado desses recursos no valor retornado e ApplyState / ApplyStateFromString methods não restaurará o estado para eles.

    gridState.options = { 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:

    constructor() {
    window.addEventListener("load", () => { this.restoreGridState(); });
    window.addEventListener("beforeunload", () => { this.saveGridState(); });
}

// Using methods that work with IgcGridStateInfo object.
public saveGridState() {
    const state = this.gridState.getState();
    window.localStorage.setItem('grid-state', JSON.stringify(state));
}

public restoreGridState() {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        this.gridState.applyState(JSON.parse(state));
    }
}

// Or using string alternative methods.
public saveGridStateString() {
    const state = this.gridState.getStateAsString();
    window.localStorage.setItem('grid-state', state);
}

public restoreGridStateString() {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        this.gridState.applyStateFromString(state);
    }
}

    Restoring Pivot Configuration

    IgcGridState 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 IgcPivotGridComponent 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:
     constructor() {
    var grid = document.getElementById('grid') as IgcPivotGridComponent;
    grid.pivotConfiguration = this.pivotConfiguration;
    grid.addEventListener("valueInit", (ev:any) => this.onValueInit(ev));
    grid.addEventListener("dimensionInit", (ev:any) => this.onDimensionInit(ev));
}

    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:
    public onValueInit(event: any) {
    const value: IgcPivotValue = event.detail;
    if (value.member === 'AmountofSale') {
        value.aggregate.aggregator = this.totalSale;
        value.aggregateList?.forEach((aggr: any) => {
            switch (aggr.key) {
                case 'SUM':
                    aggr.aggregator = this.totalSale;
                    break;
                case 'MIN':
                    aggr.aggregator = this.totalMin;
                    break;
                case 'MAX':
                    aggr.aggregator = this.totalMax;
                    break;
            }
        });
    } else if (value.member === 'Value') {
        value.formatter = (value: any) => value ? '$' + parseFloat(value).toFixed(3) : undefined;
        value.styles.upFontValue = (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150
        value.styles.downFontValue = (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150;
    }
}
    • No manipulador de eventos, DimensionInit defina todas as implementações personalizadas MemberFunction:
    public onDimensionInit(event: any) {
    const dim: IgcPivotDimension = event.detail;
    switch (dim.memberName) {
        case 'AllProducts':
            dim.memberFunction = () => 'All Products';
            break;
        case 'ProductCategory':
            dim.memberFunction = (data: any) => data.ProductName;
            break;
        case 'City':
            dim.memberFunction = (data: any) => data.City;
            break;
        case 'SellerName':
            dim.memberFunction = (data: any) => data.SellerName;
            break;
    }
}

    Demo

    Restoring Pivot Strategies

    IgcGridState não persistirá nem operações de pivô remoto nem estratégias de dimensão personalizada.

    A restauração de qualquer um deles pode ser obtida com código no nível do aplicativo. O IgcGridState expõe um evento chamado StateParsed que pode ser usado para modificar adicionalmente o estado da grade antes de ser aplicado. Vamos mostrar como fazer isso:

    StateParsed só é emitido quando estamos usando SetState o argumento com string.

    • Defina a estratégia de classificação personalizada e as estratégias personalizadas de dimensão de linha e coluna dinâmica:
    public pivotConfiguration: IgcPivotConfiguration = {
    columnStrategy: IgcNoopPivotDimensionsStrategy.instance(),
    rowStrategy: IgcNoopPivotDimensionsStrategy.instance(),
    columns: [...],
    rows: [...],
    values: [...],
    filters: [...]
};
private gridState: IgcGridStateComponent;

constructor() {
    var grid = document.getElementById("grid") as IgcPivotGridComponent;
    this.gridState = document.getElementById('gridState') as IgcGridStateComponent;
    grid.pivotConfiguration = this.pivotConfiguration;
    PivotNoopData.getData().then((value) => {
        grid.data = value;
    });
    this.gridState.addEventListener('stateParsed', (ev:any) => this.stateParsedHandler(ev) );
}
    • Restaurar o estado LocalStorage e aplicar as estratégias personalizadas é semelhante ao seguinte:
    public restoreGridState() {
    const state = window.localStorage.getItem(this.stateKey);
    if (state) {
        this.gridState.applyStateFromString(state);
    }
}

public stateParsedHandler(ev: any) {
    const parsedState = ev.detail;
    parsedState.pivotConfiguration.rowStrategy = IgcNoopPivotDimensionsStrategy.instance();
    parsedState.pivotConfiguration.columnStrategy = IgcNoopPivotDimensionsStrategy.instance();
}

    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 IgcGridState 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.