React Persistência de estado de grade

    A persistência de estado Ignite UI for React na React Grade permite que os desenvolvedores salvem e restaurem facilmente o estado da grade. Quando oIgrGridState é aplicado no ReactIgrGrid, 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
    • Filtragem avançada
    • Paginação
    • CellSelection
    • Seleção de linha
    • ColumnSelection
    • RowPinning
    • Expansão
    • AgruparPor
    • Columns
      • Multi column headers
      • Ordem das colunas
      • Propriedades da coluna definidas pelaIColumnState interface.

    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.

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

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

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

    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, []);
    }
}

    Demo

    Limitations

    • getStateAsStringo método JSON.stringify() para converter os objetos originais em uma string JSON. JSON.stringify() não suporta Funções, por isso oIgrGridState componente ignora as colunasFormatter,filters​Summaries,SortStrategy,,CellClasses,,CellStyles eHeaderTemplate​BodyTemplate as propriedades.

    Additional Resources