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

    El guardado/restauración del estado para las cuadrículas hijas está controlado por larowIslands propiedad y está habilitado por defecto.IgxGridState Utilizaré las mismas opciones para guardar/restaurar características tanto para la cuadrícula raíz como para todas las cuadrículas hijas de la jerarquía. Por ejemplo, si pasamos las siguientes opciones:

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

    Luego lagetState API devolverá el estado de todas las cuadrículas (cuadrícula raíz y cuadrículas hijas), exceptoselection ysorting. Si más adelante el promotor quiere restaurar solo elfiltering estado de todas las cuadras, usa:

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

    Demo

    Limitations

    • Al restaurar todas las características de la cuadrícula a la vez (usandosetState una API sin parámetros), las propiedades de columna para la cuadrícula raíz pueden restablecerse a valores predeterminados. Si esto ocurre, restaura la columna o la función de selección de columnas por separado después de eso:
    state.setState(gridState);
state.setState(gridState.columns);
state.setState(gridState.columnSelection);

    API References

    Additional Resources