fix(pivotGrid): Fix pivot row select event not triggering due to being run outside of ngZone. Rely on dimension header group for click handling.

Author: skrustev

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

@@ -12,8 +12,7 @@
 </div>
 
 <ng-template #headerTemplate let-column>
-    <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}'
-        (click)="selectPivotRow(column, $event)">
+    <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}'>
         <igx-icon [attr.draggable]=" false" (click)="grid.toggleRow(getRowDimensionKey(column))">
             {{ getExpandState(column) ? 'expand_more' : 'chevron_right'}}</igx-icon>
         {{column.header}}
@@ -22,8 +21,7 @@
 
 <ng-template #headerDefaultTemplate let-column>
 
-    <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}'
-        (click)="selectPivotRow(column, $event)">
+    <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}'>
         <igx-icon style='flex-shrink: 0;' [attr.draggable]=" false">
         </igx-icon>
         {{column.header}}

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.ts

@@ -132,22 +132,6 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
         return this.rowSpan * this.grid.rowHeight + (this.rowSpan - 1);
     }
 
-    /**
-     * @hidden @internal
-     */
-    public selectPivotRow(col: any, event?: any) {
-        if (this.grid.rowSelection === 'none') {
-            return;
-        }
-        event?.stopPropagation();
-        const key = this.getRowDimensionKey(col);
-        if (this.grid.selectionService.isRowSelected(key)) {
-            this.grid.selectionService.deselectRow(key, event);
-        } else {
-            this.grid.selectionService.selectRowById(key, true, event);
-        }
-    }
-
     protected extractFromDimensions() {
         const dimData = PivotUtil.getDimensionLevel(this.dimension, this.rowData, this.grid.pivotKeys);
         const prevDims = this.getPrevDims(this.dimension);

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Inject, Input, ViewChild, ViewChildren } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Inject, Input, NgZone, ViewChild, ViewChildren } from '@angular/core';
 import { PlatformUtil } from '../../core/utils';
 import { IgxColumnComponent } from '../columns/column.component';
 import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface';
@@ -30,7 +30,8 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
         private elementRef: ElementRef<HTMLElement>,
         public colResizingService: IgxPivotColumnResizingService,
         public filteringService: IgxFilteringService,
-        protected platform: PlatformUtil) {
+        protected platform: PlatformUtil,
+        protected zone: NgZone) {
         super(cdRef, grid, elementRef, colResizingService, filteringService, platform);
     }
 
@@ -76,6 +77,8 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
         } else {
             this.grid.selectionService.selectRowById(key, true, event);
         }
+
+        this.zone.run(() => {});
     }
 
     /**