Angular Pivot Grid State Persistence
La directiva igxGridState permite a los desarrolladores guardar y restaurar fácilmente el estado de la red. Cuando la directiva IgxGridState
se aplica en la grilla, expone los métodos getState
y setState
que los desarrolladores pueden usar para lograr la persistencia del estado en cualquier escenario.
Supported Features
La directiva IgxGridState
admite guardar y restaurar el estado de las siguientes funciones:
Sorting
Filtering
Cell Selection
Row Selection
Column Selection
Expansion
Pivot Configuration
- Pivot Configuration properties defined by the
IPivotConfiguration
interface. - 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.
- Las estrategias de fila y columna dinámicas también se restauran utilizando código a nivel de aplicación; consulte la sección Restauración de estrategias dinámicas.
- Pivot Configuration properties defined by the
Usage
getState
: este método devuelve el estado de la cuadrícula en una cadena JSON serializada, por lo que los desarrolladores pueden simplemente tomarlo y guardarlo en cualquier almacenamiento de datos (base de datos, nube, almacenamiento local del navegador, etc.). El método acepta el primer parámetro opcional serialize
, que determina si getState
devolverá un objeto IGridState
o una cadena JSON serializada. El desarrollador puede optar por obtener solo el estado de una determinada característica/características, pasando el nombre de la característica o una matriz 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
: el método setState
acepta la cadena JSON serializada o el objeto IGridState
como argumento y restaurará el estado de cada característica encontrada en el objeto/cadena JSON.
state.setState(gridState);
state.setState(sortingFilteringStates)
options
: el objeto options
implementa la interfaz IGridStateOptions
, es decir, para cada clave, que es el nombre de una determinada característica, existe el valor booleano que indica si se rastreará el estado de esta característica. El método getState
no pondrá el estado de estas funciones en el valor devuelto y el método setState
no restaurará el estado.
public options = { cellSelection: false; sorting: false; }
<igx-pivot-grid [igxGridState]="options"></igx-pivot-grid>
Las API de punto único, fáciles de usar, permiten lograr una funcionalidad de persistencia de estado completa en solo unas pocas líneas de código. Copie y pegue el código a continuación: guardará el estado de la cuadrícula en el objeto sessionStorage
del navegador cada vez que el usuario abandone la página actual. Siempre que el usuario regrese a la página principal, se restaurará el estado de la cuadrícula. Ya no es necesario configurar esas complejas expresiones avanzadas de filtrado y clasificación cada vez para obtener los datos que desea: hágalo una vez y haga que el código siguiente haga el resto para sus 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 Pivot Configuration
IgxGridState
no persistirá en las funciones de dimensión dinámica, formateadores de valores, etc. de forma predeterminada (consulte limitations
). La restauración de cualquiera de estos se puede lograr con código a nivel de aplicación. IgxPivotGrid
expone dos eventos que se pueden usar para restablecer cualquier función personalizada que tenga en la configuración: dimensionInit
y valueInit
. Vamos a mostrar cómo hacer esto:
- Asigne controladores de eventos para los eventos
dimensionInit
yvalueInit
:
<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfig" [igxGridState]="options"
(valueInit)='onValueInit($event)' (dimensionInit)='onDimensionInit($event)'>
</igx-pivot-grid>
Los eventos
dimensionInit
yvalueInit
se emiten para cada valor y dimensión definidos en la propiedadpivotConfiguration
.
- En el controlador de eventos
valueInit
, configure todos los agregadores, formateadores y estilos personalizados:
public onValueInit(value: IPivotValue) {
// Needed only for custom aggregators, formatter or styles.
if (value.member === 'AmountofSale') {
value.aggregate.aggregator = IgxTotalSaleAggregate.totalSale;
value.aggregateList?.forEach((aggr: IPivotAggregator) => {
switch (aggr.key) {
case 'SUM':
aggr.aggregator = IgxTotalSaleAggregate.totalSale;
break;
case 'MIN':
aggr.aggregator = IgxTotalSaleAggregate.totalMin;
break;
case 'MAX':
aggr.aggregator = IgxTotalSaleAggregate.totalMax;
break;
}
});
} else if (value.member === 'Value') {
value.formatter = (value) => value ? '$' + parseFloat(value).toFixed(3) : undefined;
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;
}
}
- En el controlador de eventos
dimensionInit
, configure todas las implementaciones personalizadasmemberFunction
:
public onDimensionInit(dim: IPivotDimension) {
switch (dim.memberName) {
case 'AllProducts':
dim.memberFunction = () => 'All Products';
break;
case 'ProductCategory':
dim.memberFunction = (data) => data.Product.Name;
break;
case 'City':
dim.memberFunction = (data) => data.Seller.City;
break;
case 'SellerName':
dim.memberFunction = (data) => data.Seller.Name;
break;
}
}
Restoring Pivot Strategies
IgxGridState
no persistirá ni en las operaciones de pivote remotas ni en las estrategias de dimensiones personalizadas (para obtener más información, consulte el ejemplo de Operaciones remotas de Pivot Grid) de forma predeterminada (consulte limitations
). La restauración de cualquiera de estos se puede lograr con código a nivel de aplicación. IgxGridState
expone un evento llamado stateParsed
que se puede usar para modificar adicionalmente el estado de la cuadrícula antes de aplicarlo. Vamos a mostrar cómo hacer esto:
stateParsed
solo se emite cuando usamossetState
con un argumento de cadena.
- Establezca una estrategia de clasificación personalizada y estrategias personalizadas de dimensiones de filas y columnas dinámicas:
<igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy" [defaultExpandState]='true'
[igxGridState]="options" [sortStrategy]="customStrategy" [pivotUI]='{ showConfiguration: false }' [superCompactMode]="true" [height]="'500px'">
</igx-pivot-grid>
@ViewChild(IgxGridStateDirective, { static: true })
public state!: IgxGridStateDirective;
public customStrategy = NoopSortingStrategy.instance();
public options: IGridStateOptions = {...};
public pivotConfigHierarchy: IPivotConfiguration = {
columnStrategy: NoopPivotDimensionsStrategy.instance(),
rowStrategy: NoopPivotDimensionsStrategy.instance(),
columns: [...],
rows: [...],
values: [...],
filters: [...]
};
- Restaurar el estado desde
sessionStorage
y aplicar las estrategias personalizadas se parece a lo siguiente:
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());
parsedState.pivotConfiguration.rowStrategy = NoopPivotDimensionsStrategy.instance();
parsedState.pivotConfiguration.columnStrategy = NoopPivotDimensionsStrategy.instance();
});
this.state.setState(state as string);
}
Limitations
- El método
getState
utiliza el método JSON.stringify() para convertir los objetos originales en una cadena JSON. JSON.stringify() no admite funciones, es por eso que la directivaIgxGridState
ignorará la dimensión de pivotememberFunction
, los valores de pivotemember
,formatter
, las funcionesaggregate
personalizadas,styles
y las estrategias de configuración de pivote:columnStrategy
yrowStrategy
.