React Pivot Grid State Persistence

A persistência de Ignite UI for React estado em React Grade de Pivô permite que os desenvolvedores salvem e restaurem facilmente o estado da grade. Quando oIgrGridState é aplicado no ReactIgrPivotGrid, ele expõe ogetState,getStateAsString,applyState eapplyStateFromString métodos que os desenvolvedores podem usar para alcançar persistência de estado em qualquer cenário.

Supported Features

IgrGridStateSuporta salvar e restaurar o estado dos seguintes recursos:

• Sorting
• Filtering
• CellSelection
• ColumnSelection
• Expansion
• IgrPivotConfiguration
  • Configurações de pivô Propriedades definidas pelaIPivotConfiguration 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

OgetState método retorna o estado da grade em umIgrGridStateInfo objeto, contendo todas as informações do estado. Medidas adicionais podem ser necessárias para salvá-la.

ElegetStateAsString retorna uma string JSON serializada, então os desenvolvedores podem simplesmente pegá-la e salvá-la em qualquer armazenamento de dados (banco de dados, nuvem, localStorage do navegador, 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 umIgrGridStateInfo objeto como argumento e restaurará o estado de cada característica encontrada no objeto ou características especificadas como segundo argumento.

applyStateFromString- O método aceita uma string JSON serializada como argumento e restaurará o estado de cada característica encontrada na string JSON ou características especificadas como segundo argumento.

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

Ooptions objeto implementa aIgrGridStateOptions interface, ou seja, para cada chave, que é o nome de uma determinada característica, existe o valor booleano indicando se esse estado da característica será rastreado.getState /getStateAsString methods não colocará o estado dessas características no valor retornado eapplyState /applyStateFromString methods não restaurará o estado para elas.

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

As APIs simples de usar permitem alcançar 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 navegadorLocalStorage toda vez que o usuário sair da página atual. Sempre que o usuário retorna à página principal, o estado da grade será restaurado. Não é mais necessário configurar aquelas expressões avançadas de filtragem e ordenação toda vez para obter os dados que você quer – faça isso uma vez e o código abaixo faça o restante 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

IgrGridStatenão persistirá funções de dimensão pivot, formatadores de valor, etc., por padrão (veja limitações). Restaurar qualquer uma dessas opções pode ser feita com código no nível da aplicação. EleIgrPivotGrid expõe dois eventos que podem ser usados para recuar quaisquer funções personalizadas que você tenha na configuração:DimensionInit andValueInit. Vamos mostrar como fazer isso:

• Atribua os manipuladores de eventos para osDimensionInit eventos eValueInit and:

OsDimensionInit eventos eValueInit são emitidos para cada valor e dimensão definidos napivotConfiguration propriedade.

• NoValueInit gerenciador de 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

• getStateo método JSON.stringify() para converter os objetos originais em uma string JSON. JSON.stringify() não suporta funções, por isso aIgrGridState diretiva ignora a dimensãoMemberFunction pivot, valoresmember​Formatter pivot, funçõesaggregate personalizadasstyles e estratégias de configuração pivot:columnStrategy erowStrategy.