feat(RowPinning): Initial implementation of jump to disabled row grid action.

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html

@@ -1,4 +1,7 @@
 <ng-container *ngIf="isRowContext">
+    <button *ngIf="pinnedInArea" igxRipple igxButton="icon" (click)="jumpToGhost($event)">
+        <igx-icon fontSet="filtering-icons" name="jump_down"></igx-icon>
+    </button>
     <button *ngIf="!pinned" igxRipple igxButton="icon" (click)="pin($event)">
         <igx-icon fontSet="filtering-icons" name="pin"></igx-icon>
     </button>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts

@@ -35,6 +35,19 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
         return context && context.pinned;
     }
 
+    /**
+     * Getter to know if the row is in pinned and ghost
+     * @hidden
+     * @internal
+     */
+    get pinnedInArea(): boolean {
+        if (!this.isRow(this.strip.context)) {
+            return;
+        }
+        const context = this.strip.context;
+        return this.pinned && !context.disabled;
+    }
+
     /**
      * Pin the row according to the context.
      * @example
@@ -75,6 +88,17 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
         this.strip.hide();
     }
 
+    public jumpToGhost(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        const context = this.strip.context;
+        const grid = context.grid;
+        const ghostIndex = grid.getPinnedRowGhostIndex(context.rowID);
+        grid.scrollTo(ghostIndex, 0);
+        this.strip.hide();
+    }
+
     private renderIcons(): void {
         if (!this.isRow(this.strip.context)) {
             return;

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

@@ -229,7 +229,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));
+            result.sort((rec1, rec2) => grid.getPinedRecordIndex(rec1) - grid.getPinedRecordIndex(rec2));
             return result;
         }
 
@@ -239,8 +239,12 @@ export class IgxGridRowPinningPipe implements PipeTransform {
             return isPinned ? [] : collection;
         }
 
-        return collection.map((rec) => {
-            return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;
+        return collection.map((rec, index) => {
+            if (grid.isRecordPinned(rec)) {
+                grid.setPinnedRecordGhostIndex(rec, index);
+                return { recordRef: rec, ghostRecord: true};
+            }
+            return rec;
         });
     }
 }

projects/igniteui-angular/src/lib/grids/filtering/svgIcons.ts

@@ -228,5 +228,11 @@ export default [
           <rect x="7.5" y="7.5" width="3.75" height="3.75"/>
           <rect x="12.75" y="7.5" width="3.75" height="3.75"/>
         </svg>`
+    },
+    {
+        name: 'jump_down',
+        value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M21 19v2H5v-2h16zM13 4c1.57 0 3.03.46 4.26 1.24L15.8 6.7A5.87 5.87 0 0013 6c-3.31 0-6 2.69-6 6h3l-4 4-4-4h3c0-4.42 3.58-8 8-8z"/>
+        </svg>`
     }
 ];

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

@@ -2529,7 +2529,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected _columnPinning = false;
 
-    protected _pinnedRecordIDs = [];
+    protected _pinnedRecordMetadata = [];
 
     /**
      * @hidden
@@ -2717,43 +2717,55 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      * @internal
      */
-    public isRecordPinned(rec) {
-        const id = this.primaryKey ? rec[this.primaryKey] : rec;
-        return this._pinnedRecordIDs.indexOf(id) !== -1;
+    public isRowPinnedByIndex(rowIndex: number) {
+        return this.hasPinnedRecords && (this.isRowPinningToTop && rowIndex < this.pinnedDataView.length) ||
+            (!this.isRowPinningToTop && rowIndex >= this.unpinnedDataView.length);
     }
 
     /**
      * @hidden
      * @internal
      */
-    public isRecordPinnedByIndex(rowIndex: number) {
-        return this.hasPinnedRecords && (this.isRowPinningToTop && rowIndex < this.pinnedDataView.length) ||
-            (!this.isRowPinningToTop && rowIndex >= this.unpinnedDataView.length);
+    public isRecordPinned(rec) {
+        return this.getPinedRecordIndex(rec) !== -1;
     }
 
     /**
      * @hidden
      * @internal
      */
-    public pinRecordIndex(rec) {
+    public getPinedRecordIndex(rec) {
         const id = this.primaryKey ? rec[this.primaryKey] : rec;
-        return this._pinnedRecordIDs.indexOf(id);
+        return this._pinnedRecordMetadata.findIndex(row => row.rowID === id);
+    }
+
+    public getPinnedRowGhostIndex(rowID) {
+        return this._pinnedRecordMetadata.find(row => row.rowID === rowID).ghostIndex;
     }
 
     /**
      * @hidden
      * @internal
      */
     public get hasPinnedRecords() {
-        return this._pinnedRecordIDs.length > 0;
+        return this._pinnedRecordMetadata.length > 0;
     }
 
     /**
      * @hidden
      * @internal
      */
     public get pinnedRecordsCount() {
-        return this._pinnedRecordIDs.length;
+        return this._pinnedRecordMetadata.length;
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public setPinnedRecordGhostIndex(rec, ghostIndex) {
+        const id = this.primaryKey ? rec[this.primaryKey] : rec;
+        this._pinnedRecordMetadata.find(row => row.rowID === id).ghostIndex = ghostIndex;
     }
 
     constructor(
@@ -2999,12 +3011,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public setFilteredSortedData(data, pinned: boolean) {
         data = data.map(rec => rec.ghostRecord !== undefined ? rec.recordRef : rec);
-        if (this._pinnedRecordIDs.length > 0 && pinned) {
+        if (this.pinnedRecordsCount > 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) {
+        } else if (this.pinnedRecordsCount > 0 && !pinned) {
             this._filteredSortedUnpinnedData = data;
         } else {
             this.filteredSortedData = data;
@@ -4199,7 +4211,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @param index The index at which to insert the row in the pinned collection.
      */
     public pinRow(rowID: any, index?: number): boolean {
-        if (this._pinnedRecordIDs.indexOf(rowID) !== -1) {
+        if (this._pinnedRecordMetadata.findIndex(row => row.rowID === rowID) !== -1) {
             return false;
         }
         const row = this.gridAPI.get_row_by_key(rowID);
@@ -4214,8 +4226,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
 
         this.endEdit(true);
 
-        const insertIndex = isNumber(eventArgs.insertAtIndex) ? eventArgs.insertAtIndex : this._pinnedRecordIDs.length;
-        this._pinnedRecordIDs.splice(insertIndex, 0, rowID);
+        const insertIndex = isNumber(eventArgs.insertAtIndex) ? eventArgs.insertAtIndex : this._pinnedRecordMetadata.length;
+        this._pinnedRecordMetadata.splice(insertIndex, 0, { rowID: rowID, ghostIndex: -1 });
         this._pipeTrigger++;
         if (this.gridAPI.grid) {
             this.notifyChanges();
@@ -4233,7 +4245,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @param rowID The row id - primaryKey value or the data record instance.
      */
     public unpinRow(rowID: any) {
-        const index =  this._pinnedRecordIDs.indexOf(rowID);
+        const index =  this._pinnedRecordMetadata.findIndex(row => row.rowID === rowID);
         if (index === -1) {
             return false;
         }
@@ -4245,7 +4257,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         };
         this.onRowPinning.emit(eventArgs);
         this.endEdit(true);
-        this._pinnedRecordIDs.splice(index, 1);
+        this._pinnedRecordMetadata.splice(index, 1);
         this._pipeTrigger++;
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();

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

@@ -309,7 +309,7 @@ export class IgxGridNavigationService {
     }
 
     public shouldPerformVerticalScroll(targetRowIndex: number, visibleColIndex: number): boolean {
-        if (this.grid.isRecordPinnedByIndex(targetRowIndex)) { return false; }
+        if (this.grid.isRowPinnedByIndex(targetRowIndex)) { return false; }
         const scrollRowIndex = this.grid.hasPinnedRecords && this.grid.isRowPinningToTop ?
             targetRowIndex - this.grid.pinnedDataView.length : targetRowIndex;
         const targetRow = this.getRowElementByIndex(targetRowIndex);

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

@@ -623,7 +623,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
      */
     public isRecordPinned(rec) {
         const id = rec.rowID;
-        return this._pinnedRecordIDs.indexOf(id) !== -1;
+        return this._pinnedRecordMetadata.findIndex(row => row.rowID === id) !== -1;
     }
 
     /**