feat(igxGrid): Update navigation to include ghost rows. #6640

Author: skrustev

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

@@ -2441,6 +2441,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public columnWidthSetByUser = false;
 
+    /**
+     * @hidden @internal
+     */
+    public pinnedRecords: any[];
+
     /**
      * @hidden @internal
      */
@@ -2657,10 +2662,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
 
     /**
      * @hidden
+     * Returns the row index of a row that takes into account the full view data like pinning.
      */
-    public getRowIndex(rowIndex, pinned) {
+    public getDataViewIndex(rowIndex, pinned) {
         if (pinned && !this.isRowPinningToTop) {
-            rowIndex = rowIndex + this.dataView.length;
+            rowIndex = rowIndex + this.unpinnedRecords.length;
         } else if (!pinned && this.isRowPinningToTop) {
             rowIndex = rowIndex + this.pinnedRecordsCount;
         }
@@ -2719,6 +2725,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return this._pinnedRecordIDs.indexOf(id) !== -1;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public isRecordPinnedByIndex(rowIndex: number) {
+        return this.hasPinnedRecords && (this.isRowPinningToTop && rowIndex < this.pinnedRecordsCount) ||
+            (!this.isRowPinningToTop && rowIndex >= this.unpinnedRecords.length);
+    }
+
     /**
      * @hidden
      * @internal
@@ -5154,25 +5169,38 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * Returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid.
+     * Returns the currently transformed paged/filtered/sorted/grouped pinned row data, displayed in the grid.
      * @example
      * ```typescript
-     *      const dataView = this.grid.dataView;
+     *      const pinnedDataView = this.grid.pinnedDataView;
      * ```
      */
-    get dataView(): any[] {
-        return this.unpinnedRecords ? this.unpinnedRecords : this.verticalScrollContainer.igxForOf;
+    get pinnedDataView(): any[] {
+        return this.pinnedRecords ? this.pinnedRecords : [];
     }
 
     /**
-     * Returns the currently transformed paged/filtered/sorted/grouped pinned data, displayed in the grid.
+     * Returns currently transformed paged/filtered/sorted/grouped unpinned row data, displayed in the grid.
      * @example
      * ```typescript
      *      const pinnedDataView = this.grid.pinnedDataView;
      * ```
      */
-    get pinnedDataView(): any[] {
-        return this.pinnedRows.map(row => row.rowData);
+    get unpinnedDataView(): any[] {
+        return this.unpinnedRecords ? this.unpinnedRecords : this.verticalScrollContainer.igxForOf;
+    }
+
+    /**
+     * Returns the currently transformed paged/filtered/sorted/grouped row data, displayed in the grid.
+     * @example
+     * ```typescript
+     *      const dataView = this.grid.dataView;
+     * ```
+     */
+    get dataView(): any[] {
+        return this.isRowPinningToTop ?
+            [...this.pinnedDataView, ...this.unpinnedDataView] :
+            [...this.unpinnedDataView, ...this.pinnedDataView];
     }
 
     /**
@@ -5415,7 +5443,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * If `headers` is enabled, it will use the column header (if any) instead of the column field.
      */
     public getSelectedData(formatters = false, headers = false) {
-        const source = this.isRowPinningToTop ? [...this.pinnedDataView, ...this.dataView] : [...this.dataView, ...this.pinnedDataView];
+        const source = this.dataView;
         return this.extractDataFromSelection(source, formatters, headers);
     }
 
@@ -5619,10 +5647,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.dataView.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) {
             visibleColIndex = -1;
         }
-        const shouldScrollVertically = this.navigation.shouldPerformVerticalScroll(rowIndex, visibleColIndex);
+        // If the target row is pinned no need to scroll as well.
+        const shouldScrollVertically =
+            !this.isRecordPinnedByIndex(rowIndex) && this.navigation.shouldPerformVerticalScroll(rowIndex, visibleColIndex);
         const shouldScrollHorizontally = this.navigation.shouldPerformHorizontalScroll(visibleColIndex, rowIndex);
         if (shouldScrollVertically) {
-            this.navigation.performVerticalScrollToCell(rowIndex, visibleColIndex,
+            // Only for top pinning we need to subtract pinned count because virtualization indexing doesn't count pinned rows.
+            const scrollRowIndex = this.isRowPinningToTop ? rowIndex - this.pinnedRecordsCount : rowIndex;
+            this.navigation.performVerticalScrollToCell(scrollRowIndex, visibleColIndex,
                 () => { this.navigateTo(rowIndex, visibleColIndex, cb); });
         } else if (shouldScrollHorizontally) {
             this.navigation.performHorizontalScrollToCell(visibleColIndex, () => { this.navigateTo(rowIndex, visibleColIndex, cb); });
@@ -5905,11 +5937,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (delayScrolling) {
             this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
                 this.scrollDirective(this.verticalScrollContainer,
-                    typeof (row) === 'number' ? row : this.dataView.indexOf(row));
+                    typeof (row) === 'number' ? row : this.unpinnedDataView.indexOf(row));
             });
         } else {
             this.scrollDirective(this.verticalScrollContainer,
-                typeof (row) === 'number' ? row : this.dataView.indexOf(row));
+                typeof (row) === 'number' ? row : this.unpinnedDataView.indexOf(row));
         }
 
         this.scrollToHorizontally(column);

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

@@ -769,10 +769,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     public getContext(rowData: any, rowIndex: number, pinned?: boolean): any {
-        if (pinned && !this.isRowPinningToTop) {
-            rowIndex = rowIndex + this.dataView.length;
-        }
-        rowIndex = !pinned && this.isRowPinningToTop ? rowIndex + this._pinnedRecordIDs.length : rowIndex;
         if (this.isDetailRecord(rowData)) {
             const cachedData = this.childDetailTemplates.get(rowData.detailsData);
             const rowID = this.primaryKey ? rowData.detailsData[this.primaryKey] : this.data.indexOf(rowData.detailsData);
@@ -797,7 +793,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         }
         return {
             $implicit: this.isGhostRecord(rowData) ? rowData.recordRef : rowData,
-            index: rowIndex,
+            index: this.getDataViewIndex(rowIndex, pinned),
             templateID: this.isGroupByRecord(rowData) ? 'groupRow' : this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow',
             disabled: this.isGhostRecord(rowData)
         };

projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

@@ -173,6 +173,7 @@ export class IgxGridRowPinningPipe implements PipeTransform {
         if (grid.hasPinnedRecords && isPinned) {
             const result = collection.filter(rec => grid.isRecordPinned(rec));
             result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
+            grid.pinnedRecords = result;
             return result;
         }
 

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

@@ -416,7 +416,7 @@ describe('Row Pinning #grid', () => {
             expect(grid.pinnedRows.length).toBe(1);
             let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
             expect(pinRowContainer.length).toBe(1);
-            expect(grid.dataView.length).toBe(5);
+            expect(grid.dataView.length).toBe(6);
             expect(paginator.componentInstance.totalPages).toEqual(6);
 
             grid.getRowByIndex(3).pin();
@@ -425,7 +425,7 @@ describe('Row Pinning #grid', () => {
             expect(grid.pinnedRows.length).toBe(2);
             pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
             expect(pinRowContainer.length).toBe(1);
-            expect(grid.dataView.length).toBe(5);
+            expect(grid.dataView.length).toBe(7);
             expect(paginator.componentInstance.totalPages).toEqual(6);
 
             // unpin
@@ -439,7 +439,7 @@ describe('Row Pinning #grid', () => {
             pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
             expect(pinRowContainer.length).toBe(0);
 
-            expect(grid.dataView.length).toBe(5);
+            expect(grid.dataView.length).toBe(6);
             expect(paginator.componentInstance.totalPages).toEqual(6);
         });
 

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

@@ -140,7 +140,7 @@
                 'igx-grid__tr-container': true,
                 'igx-grid__tr--highlighted':isRowHighlighted(rowData)
             }">
-                <igx-child-grid-row *ngFor="let layout of childLayoutList" [parentGridID]="id" [index]="getRowIndex(rowIndex, false)"
+                <igx-child-grid-row *ngFor="let layout of childLayoutList" [parentGridID]="id" [index]="rowIndex"
                     [rowData]="rowData" [layout]='layout' #row>
                 </igx-child-grid-row>
             </div>

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

@@ -547,7 +547,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
             return {
                 $implicit: this.isGhostRecord(rowData) ? rowData.recordRef : rowData,
                 templateID: 'dataRow',
-                index: this.getRowIndex(rowIndex, pinned),
+                index: this.getDataViewIndex(rowIndex, pinned),
                 disabled: this.isGhostRecord(rowData)
             };
         }