feat(igx-grid): add row selection checkbox keyboard navigation, #812

IgniteUI · Apr 4, 2018 · e1c4d7e · e1c4d7e
1 parent e8dee89
commit e1c4d7e
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 14 deletions.
diff --git a/demos/app/grid-selection/sample.component.ts b/demos/app/grid-selection/sample.component.ts
@@ -54,11 +54,12 @@ export class GridSelectionComponent implements OnInit, AfterViewInit {
 
     }
 
-    public handleRowSelection(cell: IgxGridCellComponent) {
+    public handleRowSelection(cell) {
+        const targetCell = cell.cell as IgxGridCellComponent;
         if  (!this.selection) {
-            console.log([cell.row]);
+            console.log([targetCell.row]);
             this.grid1.deselectAllRows();
-            this.grid1.selectRows([cell.row]);
+            this.grid1.selectRows([targetCell.row]);
         }
     }
 }
diff --git a/demos/app/grid/sample.component.ts b/demos/app/grid/sample.component.ts
@@ -234,7 +234,7 @@ export class GridSampleComponent {
 
     public updateRecord(event) {
         this.grid1.updateCell(this.selectedCell.rowIndex, this.selectedCell.columnField, event);
-        //this.grid1.getCell(this.selectedCell.rowIndex, this.selectedCell.columnField);
+        // this.grid1.getCell(this.selectedCell.rowIndex, this.selectedCell.columnField);
     }
 
     public deleteRow(event) {
@@ -257,7 +257,7 @@ export class GridSampleComponent {
     public export() {
         this.grid3.clearFilter();
 
-        let options = this.getOptions("Report");
+        const options = this.getOptions("Report");
         options.ignoreColumnsVisibility = false;
 
         this.getExporterService().export(this.grid3, options);
@@ -267,7 +267,7 @@ export class GridSampleComponent {
         this.grid3.filter("ProductName", "Queso", STRING_FILTERS.contains, true);
         this.grid3.cdr.detectChanges();
 
-        let options = this.getOptions("Queso Report");
+        const options = this.getOptions("Queso Report");
         options.ignoreFiltering = false;
         options.ignoreColumnsVisibility = false;
 

diff --git a/src/grid/grid.component.ts b/src/grid/grid.component.ts
@@ -897,7 +897,6 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
     }
 
     public deselectAllRows() {
-        console.log("deselect all rows");
         this.selectionAPI.deselect_all(this.id, this.primaryKey);
         return;
     }

diff --git a/src/grid/row.component.ts b/src/grid/row.component.ts
@@ -15,6 +15,7 @@ import {
     ViewChild,
     ViewChildren
 } from "@angular/core";
+import { take } from "rxjs/operators";
 import { IgxSelectionAPIService } from "../core/selection";
 import { IgxForOfDirective } from "../directives/for-of/for_of.directive";
 import { IgxGridAPIService } from "./api.service";
@@ -181,20 +182,50 @@ export class IgxGridRowComponent implements IGridBus, OnInit, OnDestroy, DoCheck
     }
     public handleArrows(event) {
         console.log(event);
+        let currentIndex = 0;
+        let target;
         switch (event.keyCode) {
-            case (39):
+            case (39): // rightArrow
                 this.cells.first.nativeElement.focus();
                 break;
-            case (38):
-                if (this.index === 0) {
-
+            case (38): // upArrow
+                currentIndex = this.grid.rowList.toArray().indexOf(this);
+                if (currentIndex === 0) {
+                    const verticalScroll = this.grid.verticalScrollContainer.getVerticalScroll();
+                    if (!verticalScroll) {
+                        return;
+                    }
+                    this.grid.verticalScrollContainer.onChunkLoad.pipe(take(1)).subscribe({
+                        next: (e: any) => {
+                            target = this.grid.rowList.toArray()[currentIndex - 1];
+                            if (target) {
+                                this.grid.getRowByIndex(currentIndex - 1).nativeElement.querySelector(".igx-checkbox__input").focus();
+                                this.cdr.detectChanges();
+                            }
+                        }
+                    });
+                    verticalScroll.scrollTop -= this.rowHeight;
                 } else {
                     this.grid.getRowByIndex(this.index - 1).nativeElement.querySelector(".igx-checkbox__input").focus();
                 }
                 break;
-            case (40):
-                if (this.grid.rowList.toArray().indexOf(this) >=  this.grid.rowList.length - 1) {
-
+            case (40): // downArrow
+                currentIndex = this.grid.rowList.toArray().indexOf(this);
+                if (currentIndex >= this.grid.rowList.length - 1) {
+                    const verticalScroll = this.grid.verticalScrollContainer.getVerticalScroll();
+                    if (!verticalScroll) {
+                        return;
+                    }
+                    this.grid.verticalScrollContainer.onChunkLoad.pipe(take(1)).subscribe({
+                        next: (e: any) => {
+                            target = this.grid.rowList.toArray()[currentIndex + 1];
+                            if (target) {
+                                target.nativeElement.querySelector(".igx-checkbox__input").focus();
+                                target.cdr.detectChanges();
+                            }
+                        }
+                    });
+                    verticalScroll.scrollTop += this.rowHeight;
                 } else {
                     this.grid.getRowByIndex(this.index + 1).nativeElement.querySelector(".igx-checkbox__input").focus();
                 }