feat(pivot): Fix activating rows dimensions from value cells

Author: dkamburov

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -28,7 +28,6 @@ export interface IActiveNode {
     level?: number;
     mchCache?: ColumnGroupsCache;
     layout?: IMultiRowLayoutNode;
-    isRowDimensionHeader?: boolean;
 }
 
 /** @hidden */

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -213,7 +213,9 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
                 }
             }
         }
-        this.grid.theadRow.nativeElement.focus();
+        if (!this.grid.isPivot || !this.grid.navigation.isRowHeaderActive) {
+            this.grid.theadRow.nativeElement.focus();
+        }
     }
 
     /**

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-navigation.service.ts

@@ -7,12 +7,14 @@ import { HEADER_KEYS } from '../../core/utils';
 export class IgxPivotGridNavigationService extends IgxGridNavigationService {
     public grid: IgxPivotGridComponent;
 
+    public isRowHeaderActive: boolean;
+
     public get lastRowDimensionsIndex() {
         return this.grid.rowDimensions.length - 1;
     }
 
     public focusOutRowHeader() {
-        this.activeNode.isRowDimensionHeader = false;
+        this.isRowHeaderActive = false;
     }
 
     public headerNavigation(event: KeyboardEvent) {
@@ -23,12 +25,11 @@ export class IgxPivotGridNavigationService extends IgxGridNavigationService {
         }
         event.preventDefault();
 
-        if (this.activeNode.isRowDimensionHeader) {
+        if (this.isRowHeaderActive) {
             const newActiveNode = {
                 row: this.activeNode.row, column: this.activeNode.column, level: null,
                 mchCache: null,
-                layout: null,
-                isRowDimensionHeader: this.activeNode.isRowDimensionHeader
+                layout: null
             }
 
             if ((key.includes('left') || key === 'home') && this.activeNode.column > 0) {

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

@@ -19,7 +19,7 @@
 </igx-pivot-header-row>
 
 <div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
-    <div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)"
+    <div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
         (dragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
         (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
         [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant">

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

@@ -52,25 +52,27 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
 
     @HostBinding('class.igx-grid-th--active')
     public get active() {
-        const node = this.grid.navigation.activeNode;
+        const nav = this.grid.navigation;
+        const node = nav.activeNode;
         return node && !this.column.columnGroup ?
-            node.isRowDimensionHeader &&
+            nav.isRowHeaderActive &&
             node.row === this.intRow.index &&
             node.column === this.visibleIndex :
             false;
     }
 
     public get activeGroup() {
-        const node = this.grid.navigation.activeNode;
-        return node ? node.isRowDimensionHeader && node.row === this.intRow.index && node.column === this.visibleIndex : false;
+        const nav = this.grid.navigation;
+        const node = nav.activeNode;
+        return node ? nav.isRowHeaderActive && node.row === this.intRow.index && node.column === this.visibleIndex : false;
     }
 
     protected get activeNode() {
+        this.grid.navigation.isRowHeaderActive = true;
         return {
             row: this.intRow.index, column: this.visibleIndex, level: null,
             mchCache: null,
-            layout: null,
-            isRowDimensionHeader: true
+            layout: null
         };
     }
 
@@ -89,4 +91,10 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
         });
         return result;
     }
+
+
+    public activate() {
+        this.grid.navigation.isRowHeader = true;
+        this.grid.navigation.setActiveNode(this.activeNode);
+    }
 }

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

@@ -138,9 +138,10 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
     }
 
     public isCellActive(visibleColumnIndex) {
-        const node = this.grid.navigation.activeNode;
+        const nav = this.grid.navigation
+        const node = nav.activeNode;
         return node && Object.keys(node).length !== 0 ?
-            !node.isRowDimensionHeader &&
+            !nav.isRowHeaderActive &&
             super.isCellActive(visibleColumnIndex) :
             false;
     }

src/app/pivot-grid/pivot-grid.sample.html

@@ -1,4 +1,15 @@
 <div class="sample-flex-row">
+    <igx-combo #combo class="combo" [itemsMaxHeight]="250" (selectionChanging)="handleChange($event)"
+               [data]="dimensions" [displayKey]="'memberName'" [(ngModel)]="selected"
+               placeholder="Dimension(s)" searchPlaceholder="Search...">
+    </igx-combo>
+    <div class="density-chooser">
+        <igx-buttongroup>
+            <button igxButton [disabled]="grid1.displayDensity === comfortable" (click)="setDensity('comfortable')">Comfortable</button>
+            <button igxButton [disabled]="grid1.displayDensity === cosy" (click)="setDensity('cosy')">Cosy</button>
+            <button igxButton [disabled]="grid1.displayDensity === compact" (click)="setDensity('compact')">Compact</button>
+        </igx-buttongroup>
+    </div>
     <igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [defaultExpandState]='true'
         [pivotConfiguration]="pivotConfigHierarchy" [rowSelection]="'single'" [columnSelection]="'single'"
         (dimensionsChange)='dimensionChange($event)'