chore(*): Fix for API usage when primaryKey is set.

Author: MKirova

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

@@ -4033,7 +4033,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @param index The index at which to insert the row in the pinned collection.
      */
     public pinRow(rowID, index?): boolean {
-        if (this.pinnedRecords.indexOf(rowID) !== -1) {
+        const rec = this.primaryKey ? this.gridAPI.get_rec_by_id(rowID) : rowID;
+        if (this.pinnedRecords.indexOf(rec) !== -1) {
             return false;
         }
         const row = this.gridAPI.get_row_by_key(rowID);
@@ -4046,7 +4047,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         };
         this.onRowPinning.emit(eventArgs);
 
-        this.pinnedRecords.splice(eventArgs.insertAtIndex || this.pinnedRecords.length, 0, rowID);
+        this.pinnedRecords.splice(eventArgs.insertAtIndex || this.pinnedRecords.length, 0, rec);
         this._pipeTrigger++;
         if (this.gridAPI.grid) {
             this.notifyChanges(true);
@@ -4064,7 +4065,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @param rowID The row id - primaryKey value or the data record instance.
     */
     public unpinRow(rowID) {
-        if (this.pinnedRecords.indexOf(rowID) === -1) {
+        const rec = this.primaryKey ? this.gridAPI.get_rec_by_id(rowID) : rowID;
+        const index =  this.pinnedRecords.indexOf(rec);
+        if (index === -1) {
             return false;
         }
         const row = this.gridAPI.get_row_by_key(rowID);
@@ -4074,7 +4077,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             row: row
         };
         this.onRowPinning.emit(eventArgs);
-        const index =  this.pinnedRecords.indexOf(rowID);
         this.pinnedRecords.splice(index, 1);
         this._pipeTrigger++;
         if (this.gridAPI.grid) {

projects/igniteui-angular/src/lib/grids/row.directive.ts

@@ -65,7 +65,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
      * ```
      */
     public get pinned(): boolean {
-        return this.grid.pinnedRecords.indexOf(this.rowID) !== -1;
+        return this.grid.pinnedRecords.indexOf(this.rowData) !== -1;
     }
     /**
      * Sets whether the row is pinned.

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

@@ -8,11 +8,11 @@
                 <igx-switch (change)='onRowChange()' style="padding-left: 10px"> Bottom Row Pinning toggle</igx-switch>
                 <igx-switch (change)='onChange()' style="padding-left: 10px"> Right Column Pinning toggle</igx-switch>
             </div>
-        <igx-grid [allowFiltering]='true' [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
+        <igx-grid [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
             <igx-column width='70px' [filterable]='false'>
                 <ng-template igxCell let-cell="cell" let-val>
                     <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
-                        {{isRowPinned(cell.row) ? 'lock' : 'lock_open'}}
+                        {{cell.row.pinned ? 'lock' : 'lock_open'}}
                     </igx-icon>
                 </ng-template>
             </igx-column>

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

@@ -90,15 +90,11 @@ export class GridRowPinningSampleComponent implements OnInit {
 
     togglePining(row: IgxGridRowComponent, event) {
         event.preventDefault();
-        if(this.isRowPinned(row)) {
+        if(row.pinned) {
             row.unpin();
         } else {
             row.pin();
         }
     }
 
-    isRowPinned(row) {
-        return this.grid1.pinnedRecords.indexOf(row.rowID) !== -1;
-    }
-
 }