Merge pull request #10116 from IgniteUI/mdragnev/fix-9994

Add rowAdd and rowDelete events

Author: ChronosSF

CHANGELOG.md

@@ -24,10 +24,15 @@ All notable changes for each version of this project will be documented in this
         ```
     - Added capability to restore the state of multi column headers with `IgxGridStateDirective`.
     - Introduced new 'rowStyles' and 'rowClasses' grid properties which allows to define a custom styling on each grid row
+    - Introduced two new *cancellable* outputs related to CRUD - `rowDelete` and `rowAdd`. Both use an `IGridEditEventArgs` object as an event argument.
+        ```html
+        <igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" (rowDelete)="rowDelete($event)" [autoGenerate]="true"></igx-grid>
+        ```
 - `IgxSnackbarComponent`
     - Introduced new 'positionSettings' input which allows to define a custom animation and position.
 - `IgxToastComponent`
     - Introduced new 'positionSettings' input which allows to define a custom animation and position.
+
 ## 12.1.3
 
 ### New Features

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

@@ -127,11 +127,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
         }
         const context = this.strip.context;
         const grid = context.grid;
-        const record = grid.deleteRow(context.rowID);
-        if (record !== null && record !== undefined) {
-            //  TODO: should we emit this when cascadeOnDelete is true for each row?!?!
-            grid.rowDeleted.emit({ data: record });
-        }
+        grid.deleteRow(context.rowID);
 
         this.strip.hide();
     }

projects/igniteui-angular/src/lib/grids/common/crud.service.ts

@@ -351,6 +351,12 @@ export class IgxRowCrudState extends IgxCellCrudState {
             rowEditArgs = this.grid.gridAPI.update_row(this.row, this.row.newData, event);
             nonCancelableArgs = this.rowEditDone(rowEditArgs.oldValue, event);
         } else {
+            const rowAddArgs = this.row.createEditEventArgs(true, event);
+            this.grid.rowAdd.emit(rowAddArgs);
+            if (rowAddArgs.cancel) {
+                return rowAddArgs;
+            }
+
             this.grid.transactions.endPending(false);
 
             const parentId = this.getParentRowId();
@@ -467,6 +473,9 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
         }
 
         const args = super.endRowTransaction(commit, event);
+        if (args.cancel) {
+            return args;
+        }
 
         this.endAddRow();
         if (commit) {

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

@@ -741,6 +741,34 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @Output()
     public rowDeleted = new EventEmitter<IRowDataEventArgs>();
 
+    /**
+     * Emmited when deleting a row.
+     *
+     * @remarks
+     * This event is cancelable.
+     * Returns an `IGridEditEventArgs` object.
+     * @example
+     * ```html
+     * <igx-grid #grid [data]="localData" (rowDelete)="rowDelete($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
+     * ```
+     */
+    @Output()
+    public rowDelete = new EventEmitter<IGridEditEventArgs>();
+
+    /**
+     * Emmited just before the newly added row is commited.
+     *
+     * @remarks
+     * This event is cancelable.
+     * Returns an `IGridEditEventArgs` object.
+     * @example
+     * ```html
+     * <igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
+     * ```
+     */
+     @Output()
+     public rowAdd = new EventEmitter<IGridEditEventArgs>();
+
     /**
      * Emitted after column is resized.
      *
@@ -4466,7 +4494,23 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
     /** @hidden */
     public deleteRowById(rowId: any): any {
-        return this.gridAPI.deleteRowById(rowId);
+        const args = {
+            rowID: rowId,
+            cancel: false,
+            rowData: this.getRowData(rowId),
+            oldValue: null
+        };
+        this.rowDelete.emit(args);
+        if (args.cancel) {
+            return;
+        }
+
+        const record = this.gridAPI.deleteRowById(rowId);
+        if (record !== null && record !== undefined) {
+            //  TODO: should we emit this when cascadeOnDelete is true for each row?!?!
+            this.rowDeleted.emit({ data: record });
+        }
+        return record;
     }
 
     /**