Persistencia del estado de la cuadrícula jerárquica Angular

    La directiva igxGridState permite a los desarrolladores guardar y restaurar fácilmente el estado de la cuadrícula. Cuando laIgxGridState directiva se aplica a la red, expone losgetState métodossetState y que los desarrolladores pueden utilizar para lograr la persistencia de estado en cualquier escenario.

    Supported Features

    IgxGridStateDirectiva permite guardar y restaurar el estado de las siguientes características:

    • RowIslands
      • guardar/restaurar funciones para todas las cuadrículas secundarias en la jerarquía
    • Sorting
    • Filtering
    • Advanced Filtering
    • Paging
    • Cell Selection
    • Row Selection
    • Column Selection
    • Row Pinning
    • Expansion
    • Columns
      • Multi column headers
      • Orden de columnas
      • Propiedades de columna definidas por laIColumnState interfaz.
      • Las plantillas y funciones de las columnas se restauran utilizando código a nivel de aplicación; consulte la sección Restauración de columnas.
    Note

    LaIgxGridState directiva no se encarga de las plantillas. Ve a la sección Restaurar columnas para ver cómo restaurar plantillas de columnas.

    Note

    LaRow Selection característica requiere que laprimaryKey propiedad esté establecida para poder almacenarse o restaurarse correctamente.

    Usage

    getState- Este método devuelve el estado de la cuadrícula en una cadena JSON serializada, de modo que los desarrolladores pueden simplemente tomarlo y guardarlo en cualquier almacenamiento de datos (base de datos, nube, localStorage del navegador, etc.). El método acepta el primer parámetroserialize opcional, que determina sigetState devolverá unIGridState objeto o una cadena JSON serializada. El desarrollador puede elegir obtener solo el estado de una o ciertas características, pasando el nombre de la característica, o un array con nombres de características 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- ElsetState método acepta la cadena uIGridState objeto JSON serializado como argumento y restaurará el estado de cada característica encontrada en el objeto/cadena JSON.

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

    options- Eloptions objeto implementa laIGridStateOptions interfaz, es decir, para cada clave, que es el nombre de una determinada característica, existe el valor booleano que indica si este estado de la característica será rastreado.getState El método no pondrá el estado de estas características en el valor devuelto ysetState el método no restaurará el estado para ellas.

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

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

    Las APIs de punto único, sencillas de usar, permiten lograr una funcionalidad de persistencia completa de estado en solo unas pocas líneas de código. Copia y pega el código de abajo: guardará el estado de la cuadrícula en el objeto del navegadorsessionStorage cada vez que el usuario salga de la página actual. Cada vez que el usuario regresa a la página principal, el estado de la cuadrícula se restaurará. Ya no hace falta configurar esos complejos filtrados avanzados y ordenar expresiones cada vez para obtener los datos que quieres: hazlo una vez y el código de abajo hace el resto por tus usuarios:

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

    Cuando sea posible, la directiva estatal reutiliza las columnas que ya existen en la cuadrícula al restaurar el estado, en lugar de crear nuevas instancias de columna. El único escenario en el que se creará una nueva instancia es cuando la columna (o sus hijos en el caso de los grupos de columnas) no tienen propiedadfield, por lo que no hay forma única de identificar la columna coincidente y reutilizarla.

    Para tales escenarios, se imponen los siguienteslimitations. En ese caso, la restauración de objetos complejos puede lograrse con código a nivel de aplicación. Vamos a mostrar cómo hacer esto para columnas plantillas:

    1. Define una variable de referencia plantilla (en el ejemplo siguiente está#activeTemplate) y asigna un gestor de eventos para elcolumnInit 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. Consulta la vista de plantilla en el componente usando @ViewChild o @ViewChildren decorador. En elcolumnInit gestor de eventos, asigna la plantilla a la propiedad de columnabodyTemplate:
    @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

    Saving / Restoring state for the child grids is controlled by the rowIslands property and is enabled by default. IgxGridState will use the same options for saving/restoring features both for the root grid and all child grids down the hierarchy. For example, if we pass the following options:

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

    Then the getState API will return the state for all grids (root grid and child grids) features excluding selection and sorting. If later on the developer wants to restore only the filtering state for all grids, use:

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

    Demo

    Limitations

    • When restoring all grid features at once (using setState API with no parameters), then column properties for the root grid might be resetted to default. If this happens, restore the columns or column selection feature separately after that:
    state.setState(gridState);
state.setState(gridState.columns);
state.setState(gridState.columnSelection);

    API References

    Additional Resources