Angular Persistência de estado de grade hierárquica

    A diretriz igxGridState permite que desenvolvedores salvem e restaurem facilmente o estado da grade. Quando aIgxGridState diretiva é aplicada na grade, ela expõe osgetState métodos esetState que os desenvolvedores podem usar para alcançar persistência de estado em qualquer cenário.

    Supported Features

    IgxGridStateA Diretiva suporta salvar e restaurar o estado das seguintes características:

    • 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 da coluna definidas pelaIColumnState 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

    AIgxGridState diretriz não cuida dos modelos. Vá na seção Restaurar Colunas para ver como restaurar templates de coluna.

    Note

    ORow Selection recurso exige que aprimaryKey propriedade seja definida, para que ela possa ser armazenada/restaurada corretamente.

    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, localStorage do navegador, etc). O método aceita o primeiro parâmetroserialize opcional, que determina segetState retornará umIGridState objeto ou uma string JSON serializada. O desenvolvedor pode optar por obter apenas o estado de uma ou das funcionalidades específicas, passando o nome da funcionalidade, ou um array com nomes de funcionalidades como 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- OsetState método aceita a string ouIGridState objeto JSON serializado como argumento e restaurará o estado de cada característica encontrada no objeto/string JSON.

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

    options- Ooptions objeto implementa aIGridStateOptions 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 O método não colocará o estado desses recursos no valor retornado esetState 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 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 navegadorsessionStorage 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:

    // 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 de estado reutiliza 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 têm propriedadefield, então não há como identificar unicamente a coluna correspondente e reutilizá-la.

    Para tais cenários, são impostas as seguinteslimitations cenários. Nesse caso, restaurar objetos complexos pode ser feito com código no nível da aplicação. Vamos mostrar como fazer isso para colunas com templates:

    1. Defina uma variável de referência modelo (no exemplo abaixo, ela é#activeTemplate) e atribua um gerenciador de eventos para ocolumnInit 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 do modelo no componente usando @ViewChild ou @ViewChildren decorator. NocolumnInit gerenciador de eventos, atribua o template à propriedade da colunabodyTemplate:
    @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 filhas é controlado pelarowIslands propriedade e está ativado por padrão.IgxGridState Vou usar as mesmas opções para salvar/restaurar recursos tanto para a grade raiz quanto para todas as grades-filhos abaixo da hierarquia. Por exemplo, se passarmos pelas seguintes opções:

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

    Depois, agetState API retornará o estado de todas as características de grades (grade raiz e grades-filhas), excluindoselection esorting. Se mais adiante o desenvolvedor quiser restaurar apenas ofiltering estado de todas as grades, use:

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

    Demo

    Limitations

    • Ao restaurar todas as características da grade de uma vez (usandosetState uma API sem parâmetros), as propriedades das colunas da grade raiz podem ser resetadas para o padrão. Se isso acontecer, restaure separadamente a função de seleção de colunas ou colunas depois disso:
    state.setState(gridState);
state.setState(gridState.columns);
state.setState(gridState.columnSelection);

    API References

    Additional Resources