Merge pull request #8240 from IgniteUI/teodosiah/add-new-row-keyboard-nav

feat(grid): initial implemantation

Author: ChronosSF

projects/igniteui-angular/src/lib/core/utils.ts

@@ -324,7 +324,7 @@ export const NAVIGATION_KEYS = new Set([
 ]);
 export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
 export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
-export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup']);
+export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup', '+']);
 export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc' , 'l']);
 
 /**

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

@@ -50,6 +50,7 @@ export class IgxGridNavigationService {
         if (!this.activeNode || !(SUPPORTED_KEYS.has(key) || (key === 'tab' && this.grid.crudService.cell))) { return; }
         const shift = event.shiftKey;
         const ctrl = event.ctrlKey;
+        const alt = event.altKey;
         if (NAVIGATION_KEYS.has(key) && this.pendingNavigation) { event.preventDefault(); return; }
 
         const type = this.isDataRow(this.activeNode.row) ? 'dataCell' :
@@ -262,9 +263,20 @@ export class IgxGridNavigationService {
     protected handleAlt(key: string, event: KeyboardEvent) {
         event.preventDefault();
         const row = this.grid.getRowByIndex(this.activeNode.row) as any;
-        if (!this.isToggleKey(key) || !row) { return; }
 
-        if (!row.expanded && ROW_EXPAND_KEYS.has(key)) {
+        if (!(this.isToggleKey(key) || this.isAddKey(key)) || !row) { return; }
+        if (this.isAddKey(key)) {
+            if (!this.grid.rowEditable) {
+                console.warn('The grid must be in row edit mode to perform row adding!');
+                return;
+            }
+
+            if (event.shiftKey && row.treeRow !== undefined) {
+                row.beginAddChild();
+            } else if (!event.shiftKey) {
+                row.beginAddRow();
+            }
+        } else if (!row.expanded && ROW_EXPAND_KEYS.has(key)) {
             row.rowID === undefined ? row.toggle() :
                 this.grid.gridAPI.set_row_expansion_state(row.rowID, true, event);
         } else if (row.expanded && ROW_COLLAPSE_KEYS.has(key)) {
@@ -607,4 +619,8 @@ export class IgxGridNavigationService {
     private isToggleKey(key: string): boolean {
         return ROW_COLLAPSE_KEYS.has(key) || ROW_EXPAND_KEYS.has(key);
     }
+
+    private isAddKey(key: string): boolean {
+        return key === '+';
+    }
 }

projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts

@@ -98,7 +98,28 @@ describe('IgxGrid - Row Adding #grid', () => {
             // No much space between the row and the banner
             expect(addRowTop - bannerBottom).toBeLessThan(2);
         });
+        it('Should be able to enter add row mode on Alt + plus key.', () => {
+            GridFunctions.focusFirstCell(fixture);
+            fixture.detectChanges();
+
+            UIInteractions.triggerEventHandlerKeyDown('+', gridContent, true, false, false);
+            fixture.detectChanges();
+
+            const addRow = grid.getRowByIndex(1);
+            expect(addRow.addRow).toBeTrue();
 
+        });
+        it('Should not be able to enter add row mode on Alt + Shift + plus key.', () => {
+            GridFunctions.focusFirstCell(fixture);
+            fixture.detectChanges();
+
+            UIInteractions.triggerEventHandlerKeyDown('+', gridContent, true, true, false);
+            fixture.detectChanges();
+
+            const banner = GridFunctions.getRowEditingOverlay(fixture);
+            expect(banner).toBeNull();
+            expect(grid.getRowByIndex(1).addRow).toBeFalse();
+        });
         it('Should not be able to enter add row mode when rowEditing is disabled', () => {
             grid.rowEditable = false;
             fixture.detectChanges();

src/app/grid-add-row/grid-add-row.sample.ts

@@ -13,7 +13,6 @@ export class GridAddRowSampleComponent implements OnInit {
 
     data: any[];
     columns: any[];
-
     onMouseOver(event, grid, actionStrip) {
         if (event.target.nodeName.toLowerCase() === 'igx-grid-cell') {
             const rowIndex = parseInt(event.target.attributes['data-rowindex'].value, 10);