React Persistência de estado de grade

    A persistência de estado Ignite UI for React em React grade permite que os desenvolvedores salvem e restaurem facilmente o estado da grade. Quando o IgrGridState é aplicado no React IgrGrid, 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
    • Filtragem avançada
    • Paginação
    • CellSelection
    • Seleção de linha
    • ColumnSelection
    • RowPinning
    • Expansão
    • AgruparPor
    • Columns
      • Multi column headers
      • Ordem das colunas
      • Column properties defined by the IColumnState interface.

    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.

    <IgrGrid>
    <IgrGridState ref={(ref) => { gridState = ref; }}></IgrGridState>
</IgrGrid>

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

    <IgrGrid rendered={restoreGridState}>
    <IgrGridState ref={(ref) => { gridState = ref; }}></IgrGridState>
</IgrGrid>

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

    Demo

    Limitations

    Additional Resources