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 dá suporte ao salvamento e à restauração do estado dos seguintes recursos:

Sorting
Filtering
cellSelection
columnSelection
Expansion
pivotConfiguration
- 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={(ref) => { gridState = ref; }}></IgrGridState>
</IgrPivotGrid>

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

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

// get the sorting and filtering expressions
const sortingFilteringStates: IgrGridStateInfo = gridState.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.

gridState.applyState(gridState, []);
gridState.applyStateFromString(gridStateString, []);
gridState.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 rendered={restoreGridState}>
    <IgrGridState ref={(ref) => { gridState = ref; }}></IgrGridState>
</IgrPivotGrid>

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

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

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

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

function restoreGridState() {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        gridState.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:

  function onValueInit(s: IgrPivotGrid, 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.