Angular Pivot Grid State Persistence

    A diretiva igxGridState permite que os desenvolvedores salvem e restaurem facilmente o estado da rede. Quando a IgxGridState diretiva é aplicada na grade, ela expõe os métodos e setState que os getState desenvolvedores podem usar para obter persistência de estado em qualquer cenário.

    Supported Features

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

    Usage

    getState- Esse método retorna o estado da grade em uma string JSON serializada, para que os desenvolvedores possam simplesmente pegá-lo e salvá-lo em qualquer armazenamento de dados (banco de dados, nuvem, navegador localStorage etc.). O método aceita o primeiro parâmetro serialize opcional, que determina se getState retornará um IGridState objeto ou uma string JSON serializada. O desenvolvedor pode optar por obter apenas o estado de um determinado recurso/recursos, passando o nome do recurso ou uma matriz com nomes de recursos como um segundo argumento.

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

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

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

    setState- O setState método aceita a string ou IGridState objeto JSON serializado como argumento e restaurará o estado de cada recurso encontrado no objeto/string JSON.

    state.setState(gridState);
state.setState(sortingFilteringStates)

    options- O options objeto implementa a IGridStateOptions interface, ou seja, para cada chave, que é o nome de um determinado recurso, há o valor booleano indicando se esse estado de recurso será rastreado. getState não colocará o estado desses recursos no valor retornado e setState o método não restaurará o estado para ele.

    public options =  { cellSelection: false; sorting: false; }

    <igx-pivot-grid [igxGridState]="options"></igx-pivot-grid>

    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 sessionStorage 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:

    // app.component.ts
@ViewChild(IgxGridStateDirective, { static: true })
public state!: IgxGridStateDirective;

public ngOnInit() {
    this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => {
        this.saveGridState();
    });
}

public ngAfterViewInit() {
    this.restoreGridState();
}

public saveGridState() {
    const state = this.state.getState() as string;
    window.sessionStorage.setItem('grid1-state', state);
}

public restoreGridState() {
    const state = window.sessionStorage.getItem('grid1-state');
    this.state.setState(state);
}

    Restoring Pivot Configuration

    IgxGridState não persistirá funções de dimensão dinâmica, formatadores de valor, etc. por padrão (consulte limitations). A restauração de qualquer um deles pode ser obtida com código no nível do aplicativo. O IgxPivotGrid 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:
    <igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfig" [igxGridState]="options"
    (valueInit)='onValueInit($event)' (dimensionInit)='onDimensionInit($event)'>
</igx-pivot-grid>

    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(value: IPivotValue) {
    // Needed only for custom aggregators, formatter or styles.
    if (value.member === 'AmountofSale') {
        value.aggregate.aggregator = IgxTotalSaleAggregate.totalSale;
        value.aggregateList?.forEach((aggr: IPivotAggregator) => {
            switch (aggr.key) {
                case 'SUM':
                    aggr.aggregator = IgxTotalSaleAggregate.totalSale;
                    break;
                case 'MIN':
                    aggr.aggregator = IgxTotalSaleAggregate.totalMin;
                    break;
                case 'MAX':
                    aggr.aggregator = IgxTotalSaleAggregate.totalMax;
                    break;
            }
        });
    } else if (value.member === 'Value') {
        value.formatter = (value) => 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(dim: IPivotDimension) {
    switch (dim.memberName) {
        case 'AllProducts':
            dim.memberFunction = () => 'All Products';
            break;
        case 'ProductCategory':
            dim.memberFunction = (data) => data.Product.Name;
            break;
        case 'City':
            dim.memberFunction = (data) => data.Seller.City;
            break;
        case 'SellerName':
            dim.memberFunction = (data) => data.Seller.Name;
            break;
    }
}

    Restoring Pivot Strategies

    IgxGridState não persistirá nem operações dinâmicas remotas nem estratégias de dimensão personalizada (para obter mais informações, consulte Exemplo de Operações Remotas de Grade Dinâmica) por padrão (consulte limitations). A restauração de qualquer um deles pode ser obtida com código no nível do aplicativo. O IgxGridState 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:
    <igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy" [defaultExpandState]='true'
    [igxGridState]="options" [sortStrategy]="customStrategy" [pivotUI]='{ showConfiguration: false }' [superCompactMode]="true" [height]="'500px'">
</igx-pivot-grid>

    @ViewChild(IgxGridStateDirective, { static: true })
public state!: IgxGridStateDirective;

public customStrategy = NoopSortingStrategy.instance();
public options: IGridStateOptions = {...};
public pivotConfigHierarchy: IPivotConfiguration = {
    columnStrategy: NoopPivotDimensionsStrategy.instance(),
    rowStrategy: NoopPivotDimensionsStrategy.instance(),
    columns: [...],
    rows: [...],
    values: [...],
    filters: [...]
};
    • Restaurar o estado sessionStorage e aplicar as estratégias personalizadas é semelhante ao seguinte:
    public restoreState() {
    const state = window.sessionStorage.getItem('grid-state');
    this.state.stateParsed.pipe(take(1)).subscribe(parsedState => {
        parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance());
        parsedState.pivotConfiguration.rowStrategy = NoopPivotDimensionsStrategy.instance();
        parsedState.pivotConfiguration.columnStrategy = NoopPivotDimensionsStrategy.instance();
    });
    this.state.setState(state as string);
}

    Limitations

    API References

    Additional Resources