V dyulgerov/cancel pinning unpinning row 11.1.x

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

@@ -169,7 +169,7 @@ export interface IRowToggleEventArgs extends IBaseEventArgs {
 /**
  * Event emitted when a row's pin state changes.
  */
-export interface IPinRowEventArgs extends IBaseEventArgs {
+export interface IPinRowEventArgs extends IBaseEventArgs, CancelableEventArgs {
     /**
      * The row component instance, that was pinned/unpinned.
      * May be undefined if row does not exist in the current visible data.
@@ -182,7 +182,7 @@ export interface IPinRowEventArgs extends IBaseEventArgs {
     readonly rowID: any;
     /** The index at which to pin the row in the pinned rows collection. */
     insertAtIndex?: number;
-    /** Whether or noy the row is pinned or unpinned. */
+    /** Whether or not the row is pinned or unpinned. */
     readonly isPinned: boolean;
 }
 

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

@@ -4816,10 +4816,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             insertAtIndex: index,
             isPinned: true,
             rowID,
-            row
+            row,
+            cancel: false
         };
         this.onRowPinning.emit(eventArgs);
 
+        if (eventArgs.cancel) {
+            return;
+        }
+
         this.endEdit(false);
 
         const insertIndex = typeof eventArgs.insertAtIndex === 'number' ? eventArgs.insertAtIndex : this._pinnedRecordIDs.length;
@@ -4850,9 +4855,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         const eventArgs: IPinRowEventArgs = {
             isPinned: false,
             rowID,
-            row
+            row,
+            cancel: false
         };
         this.onRowPinning.emit(eventArgs);
+        if (eventArgs.cancel) {
+            return;
+        }
         this.endEdit(false);
         this._pinnedRecordIDs.splice(index, 1);
         this._pipeTrigger++;

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

@@ -3,7 +3,7 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxGridComponent } from './grid.component';
-import { IgxGridModule } from './public_api';
+import {IgxGridModule, IPinRowEventArgs } from './public_api';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { ColumnPinningPosition, RowPinningPosition } from '../common/enums';
 import { IPinningConfig } from '../grid.common';
@@ -160,8 +160,9 @@ describe('Row Pinning #grid', () => {
             expect(grid.onRowPinning.emit).toHaveBeenCalledWith({
                 row,
                 rowID,
-                insertAtIndex: undefined,
-                isPinned: true
+                insertAtIndex: 0,
+                isPinned: true,
+                cancel: false
             });
 
             row = grid.getRowByIndex(0);
@@ -172,6 +173,64 @@ describe('Row Pinning #grid', () => {
             expect(grid.onRowPinning.emit).toHaveBeenCalledTimes(2);
         });
 
+        it(`Should be able to cancel rowPinning on pin/unpin event.`, () => {
+            spyOn(grid.onRowPinning, 'emit').and.callThrough();
+            let sub = grid.onRowPinning.subscribe((e: IPinRowEventArgs) => {
+                e.cancel = true;
+            });
+
+            const row = grid.getRowByIndex(0);
+            const rowID = row.rowID;
+            expect(row.pinned).toBeFalsy();
+
+            row.pin();
+            fix.detectChanges();
+
+            expect(grid.onRowPinning.emit).toHaveBeenCalledTimes(1);
+            expect(grid.onRowPinning.emit).toHaveBeenCalledWith({
+                insertAtIndex: 0,
+                isPinned: true,
+                rowID,
+                row,
+                cancel: true
+            });
+            expect(row.pinned).toBeFalsy();
+
+            sub.unsubscribe();
+
+            row.pin();
+            fix.detectChanges();
+
+            expect(grid.onRowPinning.emit).toHaveBeenCalledTimes(2);
+            expect(grid.onRowPinning.emit).toHaveBeenCalledWith({
+                insertAtIndex: 0,
+                isPinned: true,
+                rowID,
+                row,
+                cancel: false
+            });
+            expect(row.pinned).toBe(true);
+
+            sub = grid.onRowPinning.subscribe((e: IPinRowEventArgs) => {
+                e.cancel = true;
+            });
+
+            row.unpin();
+            fix.detectChanges();
+
+            const unpinnedRow = grid.getRowByKey(row.rowID);
+
+            expect(grid.onRowPinning.emit).toHaveBeenCalledTimes(3);
+            expect(grid.onRowPinning.emit).toHaveBeenCalledWith({
+                isPinned: false,
+                rowID,
+                row: unpinnedRow,
+                cancel: true
+            });
+            expect(row.pinned).toBe(true);
+            sub.unsubscribe();
+        });
+
         it('should pin/unpin via grid API methods.', () => {
             // pin 2nd row
             grid.pinRow(fix.componentInstance.data[1]);

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

@@ -495,7 +495,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
      * ```
      */
     public pin() {
-        return this.grid.pinRow(this.rowID);
+        return this.grid.pinRow(this.rowID, this.index);
     }
 
     /**