[igxPivot] Add empty dimension and values template.

projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsBG_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsCS_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsDA_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsDE_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsES_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsFR_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts

@@ -151,7 +151,8 @@ const GridResourceStringsHU_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsIT_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsJA_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsKO_: ExpandRequire<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.'
 };
 
 

projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsNB_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsNL_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsPL_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsPT_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsRO_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsSV_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsTR_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsZHHANS_: ExpandRequire<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.'
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts

@@ -150,7 +150,8 @@ const GridResourceStringsZHHANT_: ExpandRequire<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.'
 };
 
 /**

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.'
 };

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);

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[];

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());
         });

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) {

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html

@@ -145,7 +145,7 @@
     </div>
 </ng-template>
 <ng-template #emptyRowDimensionsTemplate>
-    <div tabindex="0" *ngIf='rowDimensions.length === 0' #rowDimensionContainer role="rowgroup" class='igx-grid__tbody-pivot-dimension' (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
+    <div tabindex="0" *ngIf='columnDimensions.length > 0 || values.length > 0' #rowDimensionContainer role="rowgroup" class='igx-grid__tbody-pivot-dimension' (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
         <igx-pivot-row-dimension-content role='row' class="igx-grid-thead" [grid]="this"
             [dimension]='emptyRowDimension'
             [rootDimension]='emptyRowDimension'
@@ -155,6 +155,12 @@
     </div>
 </ng-template>
 
+<ng-template #emptyPivotGridTemplate>
+    <span class="igx-grid__tbody-message" role="cell">
+        <span>{{resourceStrings.igx_grid_pivot_empty_message}}</span>
+    </span>
+</ng-template>
+
 <div [hidden]='true'>
     <igx-grid-excel-style-filtering>
         <div igxExcelStyleColumnOperations [hidden]='true'></div>

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,19 +865,19 @@ 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() {
         return this.pivotConfiguration.filters?.filter(x => x.enabled) || [];
     }
 
     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<any>;
+
+    /**
+     * Gets/Sets a custom template when pivot grid is empty.
+     *
+     * @example
+     * ```html
+     * <igx-pivot-grid [emptyPivotGridTemplate]="myTemplate"><igx-pivot-grid>
+     * ```
+     */
+    @Input()
+    public emptyPivotGridTemplate: TemplateRef<any>;
+
+    /**
+    * @hidden @internal
+    */
+    public get template(): TemplateRef<any> {
+        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;
+    }
 }