diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts index fae51e07748..a443455e39a 100644 --- a/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsBG_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts index 44ef453dd06..5277d85ed4d 100644 --- a/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsCS_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts index 8994cd6371d..af6adda5945 100644 --- a/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsDA_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts index df9fe3a5223..975a538b659 100644 --- a/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsDE_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts index b307c7210be..32c431be944 100644 --- a/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsES_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts index 9191c1ced7f..d14a7d4da2e 100644 --- a/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsFR_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts index ef9e57611a2..a7c2f2bc413 100644 --- a/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts @@ -151,7 +151,8 @@ const GridResourceStringsHU_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts index 66257b55bfd..ab2af817789 100644 --- a/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsIT_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts index 89835022c16..692bd0afd97 100644 --- a/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsJA_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts index ef5612d3a64..8ec504d29d0 100644 --- a/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsKO_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; diff --git a/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts index 94eaf4db937..0a49102c68b 100644 --- a/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsNB_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts index 08726683408..cc3d332f4d2 100644 --- a/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsNL_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts index 17837c03e31..3227c59b144 100644 --- a/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsPL_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts index 756771dc5c7..ab9bb5818ae 100644 --- a/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsPT_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts index 4628d936430..cf5b66ee714 100644 --- a/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsRO_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts index c3269c56772..3503d0451ea 100644 --- a/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsSV_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts index c3d5aac6136..3f495bf810d 100644 --- a/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsTR_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts index 7adc9eaf29b..01c8034e80b 100644 --- a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsZHHANS_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts index 63b6c4bf147..f02d4021017 100644 --- a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsZHHANT_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts index bb64e6ab182..849db7150e7 100644 --- a/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts +++ b/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts @@ -148,6 +148,7 @@ export interface IGridResourceStrings { igx_grid_pivot_column_drop_chip?: string; igx_grid_pivot_filter_drop_chip?: string; igx_grid_pivot_value_drop_chip?: string; + igx_grid_pivot_empty_message?: string; } export const GridResourceStringsEN: IGridResourceStrings = { @@ -299,5 +300,6 @@ export const GridResourceStringsEN: IGridResourceStrings = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; diff --git a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts index f5f2f4d6fd6..050ed0942a2 100644 --- a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts @@ -144,7 +144,7 @@ export class DimensionValuesFilteringStrategy extends FilteringStrategy { protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, isTime: boolean = false, grid?: PivotGridType): any { const config = grid.pivotConfiguration; - const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined); + const allDimensions = grid.allDimensions; const enabledDimensions = allDimensions.filter(x => x && x.enabled); const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === fieldName); return PivotUtil.extractValueFromDimension(dim, rec); @@ -166,8 +166,7 @@ export class DefaultPivotSortingStrategy extends DefaultSortingStrategy { isTime?: boolean, grid?: PivotGridType) { const key = fieldName; - const config = grid.pivotConfiguration; - const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined); + const allDimensions = grid.allDimensions; const enabledDimensions = allDimensions.filter(x => x && x.enabled); this.dimension = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === key); const reverse = (dir === SortingDirection.Desc ? -1 : 1); diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index 439b62389f8..f555aa05ac5 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -626,6 +626,7 @@ export interface HierarchicalGridType extends GridType { export interface PivotGridType extends GridType { pivotConfiguration: IPivotConfiguration; + allDimensions: IPivotDimension[], showPivotConfigurationUI: boolean; columnDimensions: IPivotDimension[]; rowDimensions: IPivotDimension[]; diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index c383dc0d778..841e9a66de4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3551,7 +3551,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements public _zoneBegoneListeners() { this.zone.runOutsideAngular(() => { this.verticalScrollContainer.getScroll().addEventListener('scroll', this.verticalScrollHandler.bind(this)); - this.headerContainer.getScroll().addEventListener('scroll', this.horizontalScrollHandler.bind(this)); + this.headerContainer?.getScroll().addEventListener('scroll', this.horizontalScrollHandler.bind(this)); fromEvent(window, 'resize').pipe(takeUntil(this.destroy$)).subscribe(() => this.resizeNotify.next()); resizeObservable(this.nativeElement).pipe(takeUntil(this.destroy$)).subscribe(() => this.resizeNotify.next()); }); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts index 900c7a4e1cf..ebbecc0229d 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts @@ -19,10 +19,10 @@ export class IgxPivotFilteringService extends IgxFilteringService { public clear_filter(fieldName: string) { super.clear_filter(fieldName); - const grid = this.grid; - const config = (grid as IgxPivotGridComponent).pivotConfiguration; - const allDimensions = PivotUtil.flatten(config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined)); - const dim = allDimensions.find(x => x.memberName === fieldName || x.member === fieldName); + const grid = this.grid as IgxPivotGridComponent; + const allDimensions = grid.allDimensions; + const allDimensionsFlat = PivotUtil.flatten(allDimensions); + const dim = allDimensionsFlat.find(x => x.memberName === fieldName); dim.filter = undefined; grid.filteringPipeTrigger++; if (allDimensions.indexOf(dim) !== -1) { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html index fe7eac8a067..e4d6d82db49 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html @@ -145,7 +145,7 @@ -
+
+ + + {{resourceStrings.igx_grid_pivot_empty_message}} + + +
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index dec6621dc76..3e97211ac7b 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -135,7 +135,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } public get pivotConfiguration() { - return this._pivotConfiguration; + return this._pivotConfiguration || { rows: null, columns: null, values: null, filters: null }; } @Input() @@ -692,14 +692,26 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni public uniqueDimensionValuesStrategy(column: IgxColumnComponent, exprTree: IFilteringExpressionsTree, done: (uniqueValues: any[]) => void) { const config = this.pivotConfiguration; - const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined); - const enabledDimensions = allDimensions.filter(x => x && x.enabled); + const enabledDimensions = this.allDimensions.filter(x => x && x.enabled); const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === column.field); if (dim) { this.getDimensionData(dim, exprTree, uniqueValues => done(uniqueValues)); } } + /** + * Gets the full list of dimensions. + * + * @example + * ```typescript + * const dimensions = this.grid.allDimensions; + * ``` + */ + public get allDimensions() { + const config = this.pivotConfiguration; + return (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); + } + public getDimensionData(dim: IPivotDimension, dimExprTree: IFilteringExpressionsTree, done: (colVals: any[]) => void) { @@ -853,11 +865,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } public get rowDimensions() { - return this.pivotConfiguration.rows.filter(x => x.enabled) || []; + return this.pivotConfiguration.rows?.filter(x => x.enabled) || []; } public get columnDimensions() { - return this.pivotConfiguration.columns.filter(x => x.enabled) || []; + return this.pivotConfiguration.columns?.filter(x => x.enabled) || []; } public get filterDimensions() { @@ -865,7 +877,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } public get values() { - return this.pivotConfiguration.values.filter(x => x.enabled) || []; + return this.pivotConfiguration.values?.filter(x => x.enabled) || []; } public toggleColumn(col: IgxColumnComponent) { @@ -1513,9 +1525,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } protected generateDimensionColumns(): IgxColumnComponent[] { - const config = this.pivotConfiguration; - const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined); - const leafFields = PivotUtil.flatten(allDimensions, 0).filter(x => !x.childLevel).map(x => x.memberName); + const leafFields = PivotUtil.flatten(this.allDimensions, 0).filter(x => !x.childLevel).map(x => x.memberName); const columns = []; const factory = this.resolver.resolveComponentFactory(IgxColumnComponent); leafFields.forEach((field) => { @@ -1688,4 +1698,33 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni public getPropName(dim: IPivotDimension) { return !!dim ?? dim.memberName + this.pivotKeys.rowDimensionSeparator + 'height'; } + + /** + * @hidden @internal + */ + @ViewChild('emptyPivotGridTemplate', { read: TemplateRef, static: true }) + public defaultEmptyPivotGridTemplate: TemplateRef; + + /** + * Gets/Sets a custom template when pivot grid is empty. + * + * @example + * ```html + * + * ``` + */ + @Input() + public emptyPivotGridTemplate: TemplateRef; + + /** + * @hidden @internal + */ + public get template(): TemplateRef { + const allEnabledDimensions = this.rowDimensions.concat(this.columnDimensions); + if (allEnabledDimensions.length === 0 && this.values.length === 0) { + // no enabled values and dimensions + return this.emptyPivotGridTemplate || this.defaultEmptyPivotGridTemplate; + } + super.template; + } } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts index bac3d8e08a0..342d89fba7e 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts @@ -36,7 +36,13 @@ export class IgxPivotRowPipe implements PipeTransform { __? ): IPivotGridRecord[] { const pivotKeys = config.pivotKeys || DEFAULT_PIVOT_KEYS; - const enabledRows = config.rows.filter(x => x.enabled); + const enabledRows = config.rows?.filter(x => x.enabled) || []; + const enabledColumns = config.columns?.filter(x => x.enabled) || []; + const enabledValues = config.values?.filter(x => x.enabled) || []; + if (enabledRows.length === 0 && enabledColumns.length === 0 && enabledValues.length === 0) { + // nothing to group and aggregate by ... + return []; + } const rowStrategy = config.rowStrategy || PivotRowDimensionsStrategy.instance(); const data = cloneArray(collection, true); return rowStrategy.process(data, enabledRows, config.values, pivotKeys); @@ -131,7 +137,7 @@ export class IgxPivotRowExpansionPipe implements PipeTransform { _pipeTrigger?: number, __?, ): IPivotGridRecord[] { - const enabledRows = config.rows.filter(x => x.enabled); + const enabledRows = config.rows?.filter(x => x.enabled) || []; const data = collection ? cloneArray(collection, true) : []; for (const row of enabledRows) { PivotUtil.flattenGroups(data, row, expansionStates, defaultExpand); @@ -165,7 +171,7 @@ export class IgxPivotCellMergingPipe implements PipeTransform { const data: IPivotGridGroupRecord[] = collection ? cloneArray(collection, true) : []; const res: IPivotGridGroupRecord[] = []; - const enabledRows = config.rows.filter(x => x.enabled); + const enabledRows = config.rows?.filter(x => x.enabled); let groupData: IPivotGridGroupRecord[] = []; let prevDim; let prevDimRoot; @@ -214,8 +220,8 @@ export class IgxPivotColumnPipe implements PipeTransform { __? ): IPivotGridRecord[] { const pivotKeys = config.pivotKeys || DEFAULT_PIVOT_KEYS; - const enabledColumns = config.columns.filter(x => x.enabled); - const enabledValues = config.values.filter(x => x.enabled); + const enabledColumns = config.columns?.filter(x => x.enabled) || []; + const enabledValues = config.values?.filter(x => x.enabled) || []; const colStrategy = config.columnStrategy || PivotColumnDimensionsStrategy.instance(); const data = cloneArray(collection, true); @@ -297,7 +303,7 @@ export class IgxPivotGridSortingPipe implements PipeTransform { public transform(collection: any[], config: IPivotConfiguration, sorting: IGridSortingStrategy, id: string, pipeTrigger: number, pinned?): any[] { let result: any[]; - const allDimensions = config.rows; + const allDimensions = config.rows || []; const enabledDimensions = allDimensions.filter(x => x && x.enabled); const expressions: ISortingExpression[] = []; PivotUtil.flatten(enabledDimensions).forEach(x => { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index faebefc5433..3e875064b45 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -12,13 +12,14 @@ import { IPivotGridRecord, PivotDimensionType } from './pivot-grid.interface'; import { IgxPivotHeaderRowComponent } from './pivot-header-row.component'; import { IgxPivotDateDimension, IgxPivotGridModule } from './public_api'; import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component'; -import { IgxPivotDateAggregate } from './pivot-grid-aggregate'; +import { IgxPivotDateAggregate, IgxPivotNumericAggregate } from './pivot-grid-aggregate'; import { IgxPivotRowComponent } from './pivot-row.component'; import { PivotGridFunctions } from '../../test-utils/pivot-grid-functions.spec'; const CSS_CLASS_DROP_DOWN_BASE = 'igx-drop-down'; const CSS_CLASS_LIST = 'igx-drop-down__list'; const CSS_CLASS_ITEM = 'igx-drop-down__item'; describe('IgxPivotGrid #pivotGrid', () => { + describe('Basic IgxPivotGrid #pivotGrid', () => { let fixture; configureTestSuite((() => { @@ -35,6 +36,72 @@ describe('IgxPivotGrid #pivotGrid', () => { fixture = TestBed.createComponent(IgxPivotGridTestBaseComponent); fixture.detectChanges(); })); + it('should show empty template when there are no dimensions and values', () => { + // whole pivotConfiguration is undefined + const pivotGrid = fixture.componentInstance.pivotGrid as IgxPivotGridComponent; + pivotGrid.pivotConfiguration = undefined; + fixture.detectChanges(); + + // no rows, just empty message + expect(pivotGrid.rowList.length).toBe(0); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); + + // configuration is defined but all collections are empty + pivotGrid.pivotConfiguration = { + columns: [], + rows: [], + values: [] + }; + fixture.detectChanges(); + + // no rows, just empty message + expect(pivotGrid.rowList.length).toBe(0); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); + + + // has dimensions and values, but they are disabled + pivotGrid.pivotConfiguration = { + columns: [ + { + enabled: false, + memberName: 'Country' + } + ], + rows: [ + { + enabled: false, + memberName: 'ProductCategory' + } + ], + values: [ + { + enabled: false, + member: 'UnitsSold', + aggregate: { + aggregator: IgxPivotNumericAggregate.sum, + key: 'SUM', + label: 'Sum', + }, + } + ] + }; + fixture.detectChanges(); + + // no rows, just empty message + expect(pivotGrid.rowList.length).toBe(0); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); + }); + + it('should show allow setting custom empty template.', () => { + const pivotGrid = fixture.componentInstance.pivotGrid as IgxPivotGridComponent; + pivotGrid.emptyPivotGridTemplate = fixture.componentInstance.emptyTemplate; + pivotGrid.pivotConfiguration = undefined; + fixture.detectChanges(); + + // no rows, just empty message + expect(pivotGrid.rowList.length).toBe(0); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Custom empty template.'); + }); it('should apply formatter and dataType from measures', () => { const pivotGrid = fixture.componentInstance.pivotGrid; @@ -349,6 +416,7 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(pivotGrid.columnDimensions.length).toEqual(0); }); + describe('IgxPivotGrid Features #pivotGrid', () => { it('should show excel style filtering via dimension chip.', () => { const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; @@ -1120,18 +1188,18 @@ describe('IgxPivotGrid #pivotGrid', () => { expect((rowChip1.nativeElement.nextElementSibling as any).style.visibility).toBe('hidden'); }); - it('should auto-size row dimension via the API.', () => { - const pivotGrid = fixture.componentInstance.pivotGrid; - const rowDimension = pivotGrid.pivotConfiguration.rows[0]; - expect(rowDimension.width).toBeUndefined(); - expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(200); - pivotGrid.autoSizeRowDimension(rowDimension); - fixture.detectChanges(); - expect(rowDimension.width).toBe('186px'); - expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(186); + it('should auto-size row dimension via the API.', () => { + const pivotGrid = fixture.componentInstance.pivotGrid; + const rowDimension = pivotGrid.pivotConfiguration.rows[0]; + expect(rowDimension.width).toBeUndefined(); + expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(200); + pivotGrid.autoSizeRowDimension(rowDimension); + fixture.detectChanges(); + expect(rowDimension.width).toBe('186px'); + expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(186); + }); }); }); -}); describe('IgxPivotGrid complex hierarchy #pivotGrid', () => { let fixture; @@ -1609,4 +1677,4 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(valueCols[1].header).toBe('Amount of Sale'); }); }); -}); +}); \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts index 114bf5a2442..5ed7b228b8c 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts @@ -237,7 +237,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem * @internal */ public ngOnChanges(changes: SimpleChanges) { - if (changes.unpinnedColumnCollection && this.unpinnedColumnCollection.length > 0) { + if (changes.unpinnedColumnCollection) { this.populateColumnDimensionsByLevel(); } } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts index 2921bf62dea..a0544903009 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts @@ -332,7 +332,7 @@ export class PivotUtil { } public static buildExpressionTree(config: IPivotConfiguration) { - const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined); + const allDimensions = (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); const enabledDimensions = allDimensions.filter(x => x && x.enabled); const expressionsTree = new FilteringExpressionsTree(FilteringLogic.And); diff --git a/projects/igniteui-angular/src/lib/test-utils/pivot-grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/pivot-grid-samples.spec.ts index d8203fe1951..f2a6e245e63 100644 --- a/projects/igniteui-angular/src/lib/test-utils/pivot-grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/pivot-grid-samples.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, TemplateRef, ViewChild } from '@angular/core'; import { IgxPivotNumericAggregate } from '../grids/pivot-grid/pivot-grid-aggregate'; import { IgxPivotGridComponent } from '../grids/pivot-grid/pivot-grid.component'; import { IPivotConfiguration, PivotAggregation } from '../grids/pivot-grid/pivot-grid.interface'; @@ -7,10 +7,15 @@ import { IPivotConfiguration, PivotAggregation } from '../grids/pivot-grid/pivot template: ` - ` + + + Custom empty template. + + ` }) export class IgxPivotGridTestBaseComponent { public defaultExpand = true; + @ViewChild('emptyTemplate', { read: TemplateRef, static: true }) public emptyTemplate: TemplateRef; @ViewChild('grid', { read: IgxPivotGridComponent, static: true }) public pivotGrid: IgxPivotGridComponent; public data;