Merge pull request #7328 from IgniteUI/mkirova/fix-7315

fix(igxGrid): Update getNextDataRowIndex so that it can work with pin…

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -5795,10 +5795,48 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= this.dataView.length - 1 && !previous)) {
             return currentRowIndex;
         }
-        const rows = previous ? this.dataView.slice(0, currentRowIndex).reverse() :
-            this.dataView.slice(currentRowIndex + 1, this.dataView.length);
-        const nextRow = rows.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData);
-        return nextRow ? this.dataView.indexOf(nextRow) : currentRowIndex;
+        // find next/prev record that is editable.
+        const nextRowIndex = previous ? this.findPrevEditableDataRowIndex(currentRowIndex) :
+        this.dataView.findIndex((rec, index) =>
+        index > currentRowIndex && this.isEditableDataRecordAtIndex(index));
+        return nextRowIndex !== -1 ? nextRowIndex : currentRowIndex ;
+    }
+
+    /**
+     * Returns the previous editable row index or -1 if no such row is found.
+     * @param currentIndex The index of the current editable record.
+     */
+    private findPrevEditableDataRowIndex(currentIndex): number {
+        let i = this.dataView.length;
+        while (i--) {
+            if (i < currentIndex && this.isEditableDataRecordAtIndex(i)) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+
+    /**
+     * Returns if the record at the specified data view index is a an editable data record.
+     * If record is group rec, summary rec, child rec, ghost rec. etc. it is not editable.
+     * @param dataViewIndex The index of that record in the data view.
+     */
+    private isEditableDataRecordAtIndex(dataViewIndex) {
+        const rec = this.dataView[dataViewIndex];
+        return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData &&
+        !this.isGhostRecordAtIndex(dataViewIndex);
+    }
+
+    /**
+     * Returns if the record at the specified data view index is a ghost.
+     * If record is pinned but is not in pinned area then it is a ghost record.
+     * @param dataViewIndex The index of that record in the data view.
+     */
+    private isGhostRecordAtIndex(dataViewIndex) {
+        const isPinned = this.isRecordPinned(this.dataView[dataViewIndex]);
+        const isInPinnedArea = this.isRecordPinnedByViewIndex(dataViewIndex);
+        return isPinned && !isInPinnedArea;
     }
 
     private isValidPosition(rowIndex, colIndex): boolean {

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

@@ -842,6 +842,94 @@ describe('Row Pinning #grid', () => {
         });
     });
 
+    describe(' Cell Editing', () => {
+
+        beforeEach(() => {
+            fix = TestBed.createComponent(GridRowPinningComponent);
+            fix.detectChanges();
+            // enable cell editing for column
+            grid = fix.componentInstance.instance;
+            grid.getColumnByName('CompanyName').editable = true;
+        });
+
+        it('should enter edit mode for the next editable cell when tabbing.', () => {
+            const  gridContent = GridFunctions.getGridContent(fix);
+            grid.getRowByIndex(0).pin();
+            fix.detectChanges();
+            grid.getRowByIndex(3).pin();
+            fix.detectChanges();
+
+            const firstEditable = grid.getCellByColumn(0, 'CompanyName');
+            const secondEditable = grid.getCellByColumn(1, 'CompanyName');
+            const thirdEditable = grid.getCellByColumn(3, 'CompanyName');
+            const fourthEditable = grid.getCellByColumn(5, 'CompanyName');
+
+            // enter edit mode for pinned row
+            UIInteractions.simulateDoubleClickAndSelectEvent(firstEditable);
+            fix.detectChanges();
+
+            expect(firstEditable.editMode).toBeTruthy();
+
+            // press tab on edited cell
+            UIInteractions.triggerEventHandlerKeyDown('tab', gridContent);
+            fix.detectChanges();
+
+            expect(firstEditable.editMode).toBeFalsy();
+            expect(secondEditable.editMode).toBeTruthy();
+
+            // press tab on edited cell
+            UIInteractions.triggerEventHandlerKeyDown('tab', gridContent);
+            fix.detectChanges();
+
+            expect(secondEditable.editMode).toBeFalsy();
+            expect(thirdEditable.editMode).toBeTruthy();
+
+            UIInteractions.triggerEventHandlerKeyDown('tab', gridContent);
+            fix.detectChanges();
+
+            expect(thirdEditable.editMode).toBeFalsy();
+            expect(fourthEditable.editMode).toBeTruthy();
+        });
+        it('should enter edit mode for the previous editable cell when shift+tabbing.', () => {
+            const  gridContent = GridFunctions.getGridContent(fix);
+            grid.getRowByIndex(0).pin();
+            fix.detectChanges();
+            grid.getRowByIndex(3).pin();
+            fix.detectChanges();
+
+            const firstEditable = grid.getCellByColumn(0, 'CompanyName');
+            const secondEditable = grid.getCellByColumn(1, 'CompanyName');
+            const thirdEditable = grid.getCellByColumn(3, 'CompanyName');
+            const fourthEditable = grid.getCellByColumn(5, 'CompanyName');
+
+            // enter edit mode for unpinned row
+            UIInteractions.simulateDoubleClickAndSelectEvent(fourthEditable);
+            fix.detectChanges();
+
+            expect(fourthEditable.editMode).toBeTruthy();
+            // press shift+tab on edited cell
+            UIInteractions.triggerEventHandlerKeyDown('tab', gridContent, false, true);
+            fix.detectChanges();
+
+            expect(fourthEditable.editMode).toBeFalsy();
+            expect(thirdEditable.editMode).toBeTruthy();
+
+            // press shift+tab on edited cell
+            UIInteractions.triggerEventHandlerKeyDown('tab', gridContent, false, true);
+            fix.detectChanges();
+
+            expect(thirdEditable.editMode).toBeFalsy();
+            expect(secondEditable.editMode).toBeTruthy();
+
+            // press shift+tab on edited cell
+            UIInteractions.triggerEventHandlerKeyDown('tab', gridContent, false, true);
+            fix.detectChanges();
+
+            expect(secondEditable.editMode).toBeFalsy();
+            expect(firstEditable.editMode).toBeTruthy();
+        });
+    });
+
     describe(' Navigation', () => {
         let gridContent: DebugElement;
 

src/app/grid-column-pinning/grid-column-pinning.sample.html

@@ -12,7 +12,7 @@
                 <button igxButton="raised" (click)="togglePinRow(2)">Pin/Unpin third row'</button>
             </div>
         <igx-grid [pinning]="pinningConfig" #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelection]="selectionMode">
-            <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned'
+            <igx-column *ngFor="let c of columns" [editable] = true [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned'
                 [hidden]='c.hidden'>
             </igx-column>
         </igx-grid>