Angular Persistência de estado de grade hierárquica

    A diretiva igxGridState permite que os desenvolvedores salvem e restaurem facilmente o estado da rede. Quando a IgxGridState diretiva é aplicada na grade, ela expõe os métodos e setState que os getState desenvolvedores podem usar para obter persistência de estado em qualquer cenário.

    Supported Features

    IgxGridState dá suporte ao salvamento e à restauração do estado dos seguintes recursos:

    • RowIslands
      • Salvando/restaurando recursos para todas as grades filhas na hierarquia
    • Sorting
    • Filtering
    • Advanced Filtering
    • Paging
    • Cell Selection
    • Row Selection
    • Column Selection
    • Row Pinning
    • Expansion
    • Columns
      • Multi column headers
      • Ordem das colunas
      • Propriedades de coluna definidas pela IColumnState interface.
      • Os modelos e funções de colunas são restaurados usando o código no nível do aplicativo, consulte a seção Restaurando colunas.
    Note

    A IgxGridState diretiva não cuida de modelos. Vá para a seção Restaurando coluna para ver como restaurar modelos de coluna.

    Note

    The Row Selection feature requires the primaryKey property to be set, so it can be stored/restored correctly.

    Usage

    getState- Esse método retorna o estado da grade em uma string JSON serializada, para que os desenvolvedores possam simplesmente pegá-lo e salvá-lo em qualquer armazenamento de dados (banco de dados, nuvem, navegador localStorage etc.). O método aceita o primeiro parâmetro serialize opcional, que determina se getState retornará um IGridState objeto ou uma string JSON serializada. O desenvolvedor pode optar por obter apenas o estado de um determinado recurso/recursos, passando o nome do recurso ou uma matriz com nomes de recursos como um segundo argumento.

    // get all features` state in a serialized JSON string
const gridState = state.getState();

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

// get the sorting and filtering expressions
const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']);

    setState- O setState método aceita a string ou IGridState objeto JSON serializado como argumento e restaurará o estado de cada recurso encontrado no objeto/string JSON.

    state.setState(gridState);
state.setState(sortingFilteringStates)

    options- O options objeto implementa a IGridStateOptions interface, ou seja, para cada chave, que é o nome de um determinado recurso, há o valor booleano indicando se esse estado de recurso será rastreado. getState não colocará o estado desses recursos no valor retornado e setState o método não restaurará o estado para ele.

    public options =  { cellSelection: false; sorting: false; }

    <igx-hierarchical-grid [igxGridState]="options"></igx-hierarchical-grid>

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

    // app.component.ts
@ViewChild(IgxGridStateDirective, { static: true })
public state!: IgxGridStateDirective;

public ngOnInit() {
    this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => {
        this.saveGridState();
    });
}

public ngAfterViewInit() {
    this.restoreGridState();
}

public saveGridState() {
    const state = this.state.getState() as string;
    window.sessionStorage.setItem('grid1-state', state);
}

public restoreGridState() {
    const state = window.sessionStorage.getItem('grid1-state');
    this.state.setState(state);
}

    Restoring columns

    Quando possível, a diretiva state reutilizará as colunas que já existem na grade ao restaurar o estado, em vez de criar novas instâncias de coluna. O único cenário em que uma nova instância será criada é quando a coluna (ou seus filhos no caso de grupos de colunas) não tiver nenhuma field propriedade, portanto, não há como identificar exclusivamente a coluna correspondente e reutilizá-la.

    Para tais cenários, o seguinte limitations é imposto. Nesse caso, a restauração de objetos complexos pode ser obtida com código no nível do aplicativo. Vamos mostrar como fazer isso para colunas modeladas:

    1. Defina uma variável de referência de modelo (no exemplo abaixo #activeTemplate) e atribua um manipulador de eventos para o columnInit evento:
    <igx-hierarchical-grid id="grid" #grid igxGridState (columnInit)="onColumnInit($event)">
    <igx-column [field]="'IsActive'" header="IsActive">
        <ng-template igxCell #activeTemplate let-column let-val="val">
            <igx-checkbox [checked]="val"></igx-checkbox>
        </ng-template>
    </igx-column>
    ...
</igx-hierarchical-grid>
    1. Consulte a visualização de modelo no componente usando @ViewChild ou @ViewChildren decorador. No manipulador de columnInit eventos, atribua o modelo à propriedade column bodyTemplate:
    @ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef<any>;
public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'IsActive') {
        column.bodyTemplate = this.activeTemplate;
        column.summaries = MySummary;
        column.filters = IgxNumberFilteringOperand.instance();
    }
}

    Restoring Child Grids

    Salvar/restaurar o estado das grades filho é controlado pela rowIslands propriedade e é habilitado por padrão. IgxGridState usará as mesmas opções para salvar/restaurar recursos tanto para a grade raiz quanto para todas as grades filhas na hierarquia. Por exemplo, se passarmos as seguintes opções:

    <!-- public options = {selection: false, sorting: false, rowIslands: true} -->
<igx-grid [igxGridState]="options"></igx-grid>

    Em seguida, a getState API retornará o estado de todos os recursos de grades (grade raiz e grades filhas), excluindo selection e sorting. Se, posteriormente, o desenvolvedor quiser restaurar apenas o filtering estado de todas as grades, use:

    this.state.setState(state, ['filtering', 'rowIslands']);

    Demo

    Limitations

    • Ao restaurar todos os recursos de grade de uma só vez (usando setState API sem parâmetros), as propriedades da coluna para a grade raiz podem ser redefinidas para o padrão. Se isso acontecer, restaure as colunas ou o recurso de seleção de coluna separadamente depois disso:
    state.setState(gridState);
state.setState(gridState.columns);
state.setState(gridState.columnSelection);

    API References

    Additional Resources