Merge pull request #7148 from IgniteUI/SKrastev/row-pinning-nav

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

Author: ChronosSF

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

@@ -227,17 +227,17 @@ export class IgxGridRowPinningPipe implements PipeTransform {
     public transform(collection: any[] , id: string, isPinned = false, pipeTrigger: number) {
         const grid = this.gridAPI.grid;
 
-        if (!grid.hasPinnedRecords) {
-            return isPinned ? [] : collection;
-        }
-
         if (grid.hasPinnedRecords && isPinned) {
             const result = collection.filter(rec => grid.isRecordPinned(rec));
             result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
             return result;
         }
 
         grid.unpinnedRecords = collection;
+        if (!grid.hasPinnedRecords) {
+            grid.pinnedRecords = [];
+            return isPinned ? [] : collection;
+        }
 
         return collection.map((rec) => {
             return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;

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

@@ -2444,6 +2444,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public columnWidthSetByUser = false;
 
+    /**
+     * @hidden @internal
+     */
+    public pinnedRecords: any[];
+
     /**
      * @hidden @internal
      */
@@ -2665,12 +2670,13 @@ 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.unpinnedDataView.length;
         } else if (!pinned && this.isRowPinningToTop) {
-            rowIndex = rowIndex + this.pinnedRecordsCount;
+            rowIndex = rowIndex + this.pinnedDataView.length;
         }
         return rowIndex;
     }
@@ -2727,6 +2733,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.pinnedDataView.length) ||
+            (!this.isRowPinningToTop && rowIndex >= this.unpinnedDataView.length);
+    }
+
     /**
      * @hidden
      * @internal
@@ -2997,6 +3012,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         data = data.map(rec => rec.ghostRecord !== undefined ? rec.recordRef : rec);
         if (this._pinnedRecordIDs.length > 0 && pinned) {
             this._filteredSortedPinnedData = data;
+            this.pinnedRecords = data;
             this.filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] :
             [... this._filteredSortedUnpinnedData, ... this._filteredSortedPinnedData];
         } else if (this._pinnedRecordIDs.length > 0 && !pinned) {
@@ -5172,25 +5188,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[] {
+    get pinnedDataView(): any[] {
+        return this.pinnedRecords ? this.pinnedRecords : [];
+    }
+
+    /**
+     * Returns currently transformed paged/filtered/sorted/grouped unpinned row data, displayed in the grid.
+     * @example
+     * ```typescript
+     *      const pinnedDataView = this.grid.pinnedDataView;
+     * ```
+     */
+    get unpinnedDataView(): any[] {
         return this.unpinnedRecords ? this.unpinnedRecords : this.verticalScrollContainer.igxForOf;
     }
 
-     /**
-      * Returns the currently transformed paged/filtered/sorted/grouped pinned data, displayed in the grid.
-      * @example
-      * ```typescript
-      *      const pinnedDataView = this.grid.pinnedDataView;
-      * ```
-      */
-    get pinnedDataView(): any[] {
-        return this.pinnedRows.map(row => row.rowData);
+    /**
+     * Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned 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];
     }
 
     /**
@@ -5433,7 +5462,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.filteredSortedData;
         return this.extractDataFromSelection(source, formatters, headers);
     }
 
@@ -5637,6 +5666,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.dataView.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) {
             visibleColIndex = -1;
         }
+        // If the target row is pinned no need to scroll as well.
         const shouldScrollVertically = this.navigation.shouldPerformVerticalScroll(rowIndex, visibleColIndex);
         const shouldScrollHorizontally = this.navigation.shouldPerformHorizontalScroll(visibleColIndex, rowIndex);
         if (shouldScrollVertically) {
@@ -5923,11 +5953,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-navigation.service.ts

@@ -309,8 +309,11 @@ export class IgxGridNavigationService {
     }
 
     public shouldPerformVerticalScroll(targetRowIndex: number, visibleColIndex: number): boolean {
+        if (this.grid.isRecordPinnedByIndex(targetRowIndex)) { return false; }
+        const scrollRowIndex = this.grid.hasPinnedRecords && this.grid.isRowPinningToTop ?
+            targetRowIndex - this.grid.pinnedDataView.length : targetRowIndex;
         const targetRow = this.getRowElementByIndex(targetRowIndex);
-        const rowHeight = this.grid.verticalScrollContainer.getSizeAt(targetRowIndex);
+        const rowHeight = this.grid.verticalScrollContainer.getSizeAt(scrollRowIndex);
         const containerHeight = this.grid.calcHeight ? Math.ceil(this.grid.calcHeight) : 0;
         const endTopOffset = targetRow ? targetRow.offsetTop + rowHeight + this.containerTopOffset : containerHeight + rowHeight;
         return !targetRow || targetRow.offsetTop < Math.abs(this.containerTopOffset)
@@ -323,7 +326,10 @@ export class IgxGridNavigationService {
     }
 
     public performVerticalScrollToCell(rowIndex: number, visibleColIndex = -1, cb?: () => void) {
-        this.grid.verticalScrollContainer.scrollTo(rowIndex);
+        // Only for top pinning we need to subtract pinned count because virtualization indexing doesn't count pinned rows.
+        const scrollRowIndex = this.grid.hasPinnedRecords && this.grid.isRowPinningToTop ?
+            rowIndex - this.grid.pinnedDataView.length : rowIndex;
+        this.grid.verticalScrollContainer.scrollTo(scrollRowIndex);
         this.grid.verticalScrollContainer.onChunkLoad
             .pipe(first()).subscribe(() => {
                 if (cb) { cb(); }