Persistencia del estado de la cuadrícula 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:

    • Sorting
    • Filtering
    • Advanced Filtering
    • Paging
    • Cell Selection
    • Row Selection
    • Column Selection
    • Row Pinning
    • Expansion
    • GroupBy
    • Columns

      • Multi column headers

      • Diseño de varias filas

      • 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-grid [igxGridState]="options"></igx-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-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-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();
    }
}

    Demo

    Restoring Strategies

    IgxGridStateno persistirá ni operaciones remotas ni estrategias dimensionales personalizadas (para más información, véase el ejemplo de Operaciones Remotas de la Rejilla) por defecto (verlimitations). Restaurar cualquiera de estos puede lograrse con código a nivel de aplicación. RevelaIgxGridState un evento llamadostateParsed que puede usarse para modificar adicionalmente el estado de la cuadrícula antes de aplicarse. Vamos a mostrar cómo hacerlo:

    Note

    stateParsedsolo se emite cuando usamossetState con argumento de cadena.

    • Establezca una estrategia de clasificación personalizada y estrategias de dimensiones de filas y columnas personalizadas:
    <igx-grid #grid 
          [data]="data" 
          [igxGridState]="options" 
          [sortStrategy]="customStrategy"
          [height]="'500px'">
</igx-grid>

    @ViewChild(IgxGridStateDirective, { static: true })
public state!: IgxGridStateDirective;

public customStrategy = NoopSortingStrategy.instance();
public options: IGridStateOptions = {...};
    • Restaurar el estado de lasessionStorage y aplicar las estrategias personalizadas se presenta de la siguiente manera:
    public restoreState() {
    const state = window.sessionStorage.getItem('grid-state');
    this.state.stateParsed.pipe(take(1)).subscribe(parsedState => {
        parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance());
    });
    this.state.setState(state as string);
}

    Limitations

    API References

    Additional Resources