fix(row-pinning): preserve pinned state when editing the primary key (#12656)

Author: dobromirts

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -6,7 +6,7 @@ import { IFilteringExpressionsTree } from '../data-operations/filtering-expressi
 import { Transaction, TransactionType, State } from '../services/transaction/transaction';
 import { IgxCell, IgxGridCRUDService, IgxEditRow } from './common/crud.service';
 import { CellType, ColumnType, GridServiceType, GridType, RowType } from './common/grid.interface';
-import { IGridEditEventArgs, IRowToggleEventArgs } from './common/events';
+import { IGridEditEventArgs, IPinRowEventArgs, IRowToggleEventArgs } from './common/events';
 import { IgxColumnMovingService } from './moving/moving.service';
 import { IGroupingExpression } from '../data-operations/grouping-expression.interface';
 import { ISortingExpression, SortingDirection } from '../data-operations/sorting-strategy';
@@ -151,6 +151,14 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
             this.grid.validation.update(cell.id.rowID, newRowData);
         }
         if (this.grid.primaryKey === cell.column.field) {
+            if (this.grid.pinnedRecords.length > 0) {
+                if (this.grid.pinnedRecords.find(r => r == cell.rowData)) {
+                    const pinnedRowIndex = this.grid.pinnedRecords.indexOf(cell.rowData);
+                    const previousRowId = cell.value;
+                    this.unpin_row(previousRowId);
+                    this.pin_row(args.newValue, pinnedRowIndex);
+                }
+            }
             if (this.grid.selectionService.isRowSelected(cell.id.rowID)) {
                 this.grid.selectionService.deselectRow(cell.id.rowID);
                 this.grid.selectionService.selectRowById(args.newValue);
@@ -543,6 +551,49 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
         return DataUtil.sort(cloneArray(data), expressions, this.grid.sortStrategy, this.grid);
     }
 
+    public pin_row(rowID: any, index?: number, row?: RowType): void {
+        const grid = (this.grid as any);
+        if (grid._pinnedRecordIDs.indexOf(rowID) !== -1) {
+            return;
+        }
+        const eventArgs = this.get_pin_row_event_args(rowID, index, row, true);
+        grid.rowPinning.emit(eventArgs);
+
+        if (eventArgs.cancel) {
+            return;
+        }
+        const insertIndex = typeof eventArgs.insertAtIndex === 'number' ? eventArgs.insertAtIndex : grid._pinnedRecordIDs.length;
+        grid._pinnedRecordIDs.splice(insertIndex, 0, rowID);
+    }
+
+    public unpin_row(rowID: any): void {
+        const grid = (this.grid as any);
+        const index = grid._pinnedRecordIDs.indexOf(rowID);
+        if (index === -1) {
+            return;
+        }
+        const eventArgs = this.get_pin_row_event_args(rowID, null , null, false);
+        grid.rowPinning.emit(eventArgs);
+
+        if (eventArgs.cancel) {
+            return;
+        }
+        grid._pinnedRecordIDs.splice(index, 1);
+    }
+
+    public get_pin_row_event_args(rowID: any, index?: number, row?: RowType, pinned?: boolean) {
+        const eventArgs: IPinRowEventArgs = {
+            isPinned: pinned ? true : false,
+            rowID,
+            row,
+            cancel: false
+        }
+        if (typeof index === 'number') {
+            eventArgs.insertAtIndex = index;
+        }
+        return eventArgs;
+    }
+
     /**
      * Updates related row of provided grid's data source with provided new row value
      *

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -6,7 +6,7 @@ import {
     IGridEditDoneEventArgs, IRowDataEventArgs, IGridKeydownEventArgs, IRowDragStartEventArgs,
     IColumnMovingEventArgs, IPinColumnEventArgs,
     IActiveNodeChangeEventArgs,
-    ICellPosition, IFilteringEventArgs, IColumnResizeEventArgs, IRowToggleEventArgs, IGridToolbarExportEventArgs
+    ICellPosition, IFilteringEventArgs, IColumnResizeEventArgs, IRowToggleEventArgs, IGridToolbarExportEventArgs, IPinRowEventArgs
 } from '../common/events';
 import { DisplayDensity, IDensityChangedEventArgs } from '../../core/displayDensity';
 import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, QueryList, TemplateRef, ViewContainerRef } from '@angular/core';
@@ -285,6 +285,8 @@ export interface GridServiceType {
     sort_multiple(expressions: ISortingExpression[]): void;
     clear_sort(fieldName: string): void;
 
+    get_pin_row_event_args(rowID: any, index?: number, row?: RowType , pinned?: boolean): IPinRowEventArgs;
+
     filterDataByExpressions(expressionsTree: IFilteringExpressionsTree): any[];
     sortDataByExpressions(data: any[], expressions: ISortingExpression[]): any[];
 

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

@@ -5121,20 +5121,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this._pinnedRecordIDs.indexOf(rowID) !== -1) {
             return false;
         }
-
-        const eventArgs: IPinRowEventArgs = {
-            insertAtIndex: index,
-            isPinned: true,
-            rowID,
-            row,
-            cancel: false
-        };
+        const eventArgs = this.gridAPI.get_pin_row_event_args(rowID, index, row, true);
         this.rowPinning.emit(eventArgs);
 
         if (eventArgs.cancel) {
             return;
         }
-
         this.crudService.endEdit(false);
 
         const insertIndex = typeof eventArgs.insertAtIndex === 'number' ? eventArgs.insertAtIndex : this._pinnedRecordIDs.length;
@@ -5164,12 +5156,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (index === -1) {
             return false;
         }
-        const eventArgs: IPinRowEventArgs = {
-            isPinned: false,
-            rowID,
-            row,
-            cancel: false
-        };
+
+        const eventArgs = this.gridAPI.get_pin_row_event_args(rowID, null, row, false);
         this.rowPinning.emit(eventArgs);
 
         if (eventArgs.cancel) {