React Pivot Grid State Persistence

    La Ignite UI for React State Persistence in React Pivot Grid permite a los desarrolladores guardar y restaurar fácilmente el estado de la cuadrícula. Cuando se aplicaIgrGridState en el ReactIgrPivotGrid, expone losgetState métodosgetStateAsString​applyState​applyStateFromString que los desarrolladores pueden usar para lograr persistencia de estado en cualquier escenario.

    Supported Features

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

    • Sorting
    • Filtering
    • CellSelection
    • ColumnSelection
    • Expansion
    • IgrPivotConfiguration
      • Propiedades de configuración de pivote definidas por laIPivotConfiguration interfaz.
      • Las funciones de Dimensión y Valor de Pivot se restauran utilizando código de nivel de aplicación; consulte la sección Restauración de la configuración de Pivot.

    Usage

    ElgetState método devuelve el estado de la cuadrícula en unIgrGridStateInfo objeto, que contiene toda la información del estado. Puede que se requieran pasos adicionales para salvarlo.

    DevuelvegetStateAsString una cadena JSON serializada, así que los desarrolladores pueden simplemente usarla y guardarla en cualquier almacenamiento de datos (base de datos, nube, navegador localStorage, etc.).

    El desarrollador puede optar por obtener solo el estado de una determinada característica o características, pasando una matriz con nombres de características como argumento. La matriz vacía dará como resultado el uso de las opciones de estado predeterminadas.

    <IgrPivotGrid>
    <IgrGridState ref={gridStateRef}></IgrGridState>
</IgrPivotGrid>

    // get an `IgrGridStateInfo` object, containing all features original state objects, as returned by the grid public API
const state: IgrGridStateInfo = gridStateRef.current.getState([]);

// get all features` state in a serialized JSON string
const stateString: string = gridStateRef.current.getStateAsString([]);

// get the sorting and filtering expressions
const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']);

    applyState- El método acepta unIgrGridStateInfo objeto como argumento y restaurará el estado de cada característica encontrada en el objeto o características especificadas como segundo argumento.

    applyStateFromString- El método acepta una cadena JSON serializada como argumento y restaurará el estado de cada característica encontrada en la cadena JSON o características especificadas como segundo argumento.

    gridStateRef.current.applyState(gridState, []);
gridStateRef.current.applyStateFromString(gridStateString, []);
gridStateRef.current.applyState(sortingFilteringStates, [])

    Eloptions objeto implementa laIgrGridStateOptions 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 /getStateAsString methods no pondrá el estado de estas características en el valor devuelto yapplyState /applyStateFromString methods no restaurará el estado para ellas.

    <IgrGridState options={{ cellSelection: false, sorting: false }}></IgrGridState>

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

    <IgrPivotGrid onRendered={restoreGridState}>
    <IgrGridState ref={gridStateRef}></IgrGridState>
</IgrPivotGrid>

    useEffect(() => {
    restoreGridState();
    window.addEventListener('beforeunload', saveGridState);
    return () => {
      window.removeEventListener('beforeunload', saveGridState);
    }
}, []);

// Using methods that work with IgrGridStateInfo object.
const saveGridState = () => {
    const state = gridStateRef.current.getState([]);
    window.localStorage.setItem('grid-state', JSON.stringify(state));
}

const restoreGridState = () => {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        gridStateRef.current.applyState(JSON.parse(state), []);
    }
}

//Or using string alternative methods.
const saveGridState = () => {
    const state = gridStateRef.current.getStateAsString([]);
    window.localStorage.setItem('grid-state', state);
}

const restoreGridState = () => {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        gridStateRef.current.applyStateFromString(state, []);
    }
}

    Restoring Pivot Configuration

    IgrGridStateno persistirá por defecto funciones de dimensión pivote, formateadores de valor, etc. (véanse limitaciones). Restaurar cualquiera de estos puede lograrse con código a nivel de aplicación. ExponeIgrPivotGrid dos eventos que pueden usarse para reiniciar cualquier función personalizada que tengas en la configuración:DimensionInit andValueInit. Vamos a mostrar cómo hacerlo:

    • Asigna manejadores de eventos para losDimensionInit eventos yValueInit de Y A:

    LosDimensionInit eventos yValueInit se emiten para cada valor y dimensión definidos en lapivotConfiguration propiedad.

    • En elValueInit gestor de eventos, se establecen todos los agregadores, formateadores y estilos personalizados:
      const onValueInit = (event: IgrPivotValueEventArgs) => {
    const value: IgrPivotValueDetail = event.detail;
    if (value.member === "AmountofSale") {
      value.aggregate.aggregator = totalSale;
      value.aggregateList?.forEach((aggr: any) => {
        switch (aggr.key) {
          case "SUM":
            aggr.aggregator = totalSale;
            break;
          case "MIN":
            aggr.aggregator = totalMin;
            break;
          case "MAX":
            aggr.aggregator = totalMax;
            break;
        }
      });
    } else if (value.member === "Value") {
      value.styles.upFontValue = (rowData: any, columnKey: any): boolean =>
        parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150;
      value.styles.downFontValue = (rowData: any, columnKey: any): boolean =>
        parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150;
    }
  }

    Demo

    Limitations

    • getStateel método utiliza JSON.stringify() para convertir los objetos originales en una cadena JSON. JSON.stringify() no soporta funciones, por eso laIgrGridState directiva ignorará la dimensiónMemberFunction pivote, los valoresmember pivotes,Formatter funcionesaggregate personalizadasstyles y estrategias de configuración pivote:columnStrategy yrowStrategy.