React Pivot Grid State Persistence

A persistência de estado Ignite UI for React em React grade dinâmica permite que os desenvolvedores salvem e restaurem facilmente o estado da grade. Quando o IgrGridState é aplicado no React IgrPivotGrid, 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

IgrGridState Suporta salvar e restaurar o estado dos seguintes recursos:

• Sorting
• Filtering
• CellSelection
• ColumnSelection
• Expansion
• IgrPivotConfiguration
  • Pivot Configuration properties defined by the IPivotConfiguration interface.
  • As funções de dimensão e valor de pivô são restauradas usando o código no nível do aplicativo, consulte a seção Restaurando a configuração de pivô.

Usage

O getState método retorna o estado da grade em um IgrGridStateInfo 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.

<IgrPivotGrid>
    <IgrGridState ref={gridStateRef}></IgrGridState>
</IgrPivotGrid>

// get an `IgrGridStateInfo` object, containing all features original state objects, as returned by the grid public API
const state: IgrGridStateInfo = gridStateRef.current.getState([]);

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

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

applyState- O método aceita um IgrGridStateInfo 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.

gridStateRef.current.applyState(gridState, []);
gridStateRef.current.applyStateFromString(gridStateString, []);
gridStateRef.current.applyState(sortingFilteringStates, [])

O options objeto implementa a IgrGridStateOptions 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.

<IgrGridState options={{ cellSelection: false, sorting: false }}></IgrGridState>

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:

<IgrPivotGrid onRendered={restoreGridState}>
    <IgrGridState ref={gridStateRef}></IgrGridState>
</IgrPivotGrid>

useEffect(() => {
    restoreGridState();
    window.addEventListener('beforeunload', saveGridState);
    return () => {
      window.removeEventListener('beforeunload', saveGridState);
    }
}, []);

// Using methods that work with IgrGridStateInfo object.
const saveGridState = () => {
    const state = gridStateRef.current.getState([]);
    window.localStorage.setItem('grid-state', JSON.stringify(state));
}

const restoreGridState = () => {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        gridStateRef.current.applyState(JSON.parse(state), []);
    }
}

//Or using string alternative methods.
const saveGridState = () => {
    const state = gridStateRef.current.getStateAsString([]);
    window.localStorage.setItem('grid-state', state);
}

const restoreGridState = () => {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        gridStateRef.current.applyStateFromString(state, []);
    }
}

Restoring Pivot Configuration

IgrGridState 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 IgrPivotGrid 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:

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:

  const onValueInit = (event: IgrPivotValueEventArgs) => {
    const value: IgrPivotValueDetail = event.detail;
    if (value.member === "AmountofSale") {
      value.aggregate.aggregator = totalSale;
      value.aggregateList?.forEach((aggr: any) => {
        switch (aggr.key) {
          case "SUM":
            aggr.aggregator = totalSale;
            break;
          case "MIN":
            aggr.aggregator = totalMin;
            break;
          case "MAX":
            aggr.aggregator = totalMax;
            break;
        }
      });
    } else if (value.member === "Value") {
      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;
    }
  }

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