fix(igxGrid): Keyboard navigation with MCH

Closes #488

Author: rkaraivanov

Diff for: projects/igniteui-angular/src/lib/grid/cell.component.ts

@@ -87,7 +87,7 @@ export class IgxGridCellComponent implements OnInit, OnDestroy, AfterViewInit {
     }
 
     get unpinnedColumnIndex(): number {
-        return this.grid.unpinnedColumns.indexOf(this.column);
+        return this.grid.unpinnedColumns.filter(c => !c.columnGroup).indexOf(this.column);
     }
 
     public get cellID() {
@@ -422,7 +422,7 @@ export class IgxGridCellComponent implements OnInit, OnDestroy, AfterViewInit {
                 if (!this.column.pinned) {
                     this.row.virtDirRow.scrollPrev();
                 } else {
-                    this.row.virtDirRow.scrollTo(this.grid.unpinnedColumns.length - 1);
+                    this.row.virtDirRow.scrollTo(this.grid.unpinnedColumns.filter(c => !c.columnGroup).length - 1);
                 }
             }
 
@@ -468,7 +468,7 @@ export class IgxGridCellComponent implements OnInit, OnDestroy, AfterViewInit {
         }
 
         event.preventDefault();
-        const visibleColumns = this.grid.visibleColumns;
+        const visibleColumns = this.grid.visibleColumns.filter(c => !c.columnGroup);
         const rowIndex = this.rowIndex;
         const columnIndex = this.visibleColumnIndex + 1;
 

Diff for: projects/igniteui-angular/src/lib/grid/column.component.ts

@@ -151,7 +151,7 @@ export class IgxColumnComponent implements AfterContentInit {
     public set pinned(value: boolean) {
         if (this._pinned !== value) {
             if (this.grid && this.width && !isNaN(parseInt(this.width, 10))) {
-                value ? this._pinColumn() : this._unpinColumn();
+                value ? this.pin() : this.unpin();
                 return;
             }
             /* No grid/width available at initialization. `initPinning` in the grid
@@ -235,17 +235,20 @@ export class IgxColumnComponent implements AfterContentInit {
 
     get visibleIndex(): number {
         const grid = this.gridAPI.get(this.gridID);
+        const unpinnedColumns = this.grid.unpinnedColumns.filter(c => !c.columnGroup);
+        const pinnedColumns = this.grid.pinnedColumns.filter(c => !c.columnGroup);
+        let col = this;
         let vIndex = -1;
 
         if (this.columnGroup) {
-            return vIndex;
+            col = this.allChildren.filter(c => !c.columnGroup)[0] as any;
         }
 
         if (!this.pinned) {
-            const indexInCollection = grid.unpinnedColumns.indexOf(this);
-            vIndex = indexInCollection === -1 ? -1 : grid.pinnedColumns.length + indexInCollection;
+            const indexInCollection = unpinnedColumns.indexOf(col);
+            vIndex = indexInCollection === -1 ? -1 : pinnedColumns.length + indexInCollection;
         } else {
-            vIndex = grid.pinnedColumns.indexOf(this);
+            vIndex = pinnedColumns.indexOf(col);
         }
         return vIndex;
     }
@@ -360,24 +363,27 @@ export class IgxColumnComponent implements AfterContentInit {
         }
     }
 
-    public _pinColumn(index?) {
+    public pin(index?) {
         // TODO: Probably should the return type of the old functions
         // should be moved as a event parameter.
 
+        if (this._pinned) {
+            return false;
+        }
+
         if (this.parent && !this.parent.pinned) {
-            this.topLevelParent.pinned = true;
-            return;
+            return this.topLevelParent.pin(index);
         }
 
         const grid = (this.grid as any);
         const width = parseInt(this.width, 10);
+        const oldIndex = this.visibleIndex;
 
         if (grid.getUnpinnedWidth(true) - width < grid.unpinnedAreaMinWidth) {
             return false;
         }
 
         this._pinned = true;
-        const oldIndex = this.visibleIndex;
         this._unpinnedIndex = grid._unpinnedColumns.indexOf(this);
         index = index !== undefined ? index : grid._pinnedColumns.length;
         const args = { column: this, insertAtIndex: index };
@@ -394,22 +400,28 @@ export class IgxColumnComponent implements AfterContentInit {
         if (this.columnGroup) {
             this.children.forEach(child => child.pinned = true);
         }
-        grid.reinitPinStates();
+        // grid.reinitPinStates();
 
         grid.markForCheck();
         const newIndex = this.visibleIndex;
         this.updateHighlights(oldIndex, newIndex);
+        return true;
     }
 
-    public _unpinColumn(index?) {
+    public unpin(index?) {
+
+        if (!this._pinned) {
+            return false;
+        }
+
         if (this.parent && this.parent.pinned) {
-            this.topLevelParent.pinned = false;
-            return;
+            return this.topLevelParent.unpin(index);
         }
 
         const grid = (this.grid as any);
         const oldIndex = this.visibleIndex;
-        index = index !== undefined ? index : this._unpinnedIndex;
+        index = (index !== undefined ? index :
+            this._unpinnedIndex !== undefined ? this._unpinnedIndex : this.index);
         this._pinned = false;
 
         grid._unpinnedColumns.splice(index, 0, this);
@@ -425,6 +437,7 @@ export class IgxColumnComponent implements AfterContentInit {
         grid.markForCheck();
         const newIndex = this.visibleIndex;
         this.updateHighlights(oldIndex, newIndex);
+        return true;
     }
 
     get topLevelParent() {

Diff for: projects/igniteui-angular/src/lib/grid/grid.component.ts

@@ -1066,7 +1066,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
         }
 
         if (dropTarget.pinned && !column.pinned) {
-            column._pinColumn(dropTarget.index);
+            column.pin(dropTarget.index);
             return;
         }
 
@@ -1279,16 +1279,14 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
 
     // TODO: We have return values here. Move them to event args ??
 
-    public pinColumn(columnName: string | IgxColumnComponent): boolean {
+    public pinColumn(columnName: string | IgxColumnComponent, index?): boolean {
         const col = columnName instanceof IgxColumnComponent ? columnName : this.getColumnByName(columnName);
-        col.pinned = true;
-        return true;
+        return col.pin(index);
     }
 
-    public unpinColumn(columnName: string | IgxColumnComponent): boolean {
+    public unpinColumn(columnName: string | IgxColumnComponent, index?): boolean {
         const col = columnName instanceof IgxColumnComponent ? columnName : this.getColumnByName(columnName);
-        col.pinned = false;
-        return true;
+        return col.unpin(index);
     }
 
     public toggleAllGroupRows() {

Diff for: projects/igniteui-angular/src/lib/grid/grid.pinning.spec.ts

@@ -1,12 +1,9 @@
 import { Component, ViewChild } from '@angular/core';
-import { async, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
+import { async, discardPeriodicTasks, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Calendar } from '../calendar/index';
-import { KEYCODES } from '../core/utils';
-import { DataType } from '../data-operations/data-util';
 import { SortingDirection } from '../data-operations/sorting-expression.interface';
-import { IgxGridCellComponent } from './cell.component';
 import { IgxColumnComponent } from './column.component';
 import { IgxGridHeaderComponent } from './grid-header.component';
 import { IGridCellEventArgs, IgxGridComponent } from './grid.component';
@@ -568,17 +565,13 @@ describe('IgxGrid - Column Pinning ', () => {
         const pinnedColumnsLength = grid.pinnedColumns.length;
         const unpinnedColumnsLength = grid.unpinnedColumns.length;
 
-        let col = grid.getColumnByName('CompanyName');
-
-        let result = col.pinned = true;
+        let result = grid.pinColumn('CompanyName');
         fix.detectChanges();
 
         expect(grid.pinnedColumns.length).toEqual(pinnedColumnsLength);
         expect(result).toBe(false);
 
-        col = grid.getColumnByName('City');
-
-        result = col.pinned = false;
+        result = grid.unpinColumn('City');
         fix.detectChanges();
 
         expect(grid.unpinnedColumns.length).toEqual(unpinnedColumnsLength);