Angular Data Grid Confirmation on Row Removal

The Angular Grid provides built-in confirmation functionality that helps prevent accidental data deletion when users remove rows. This feature enhances user experience by allowing users to confirm or cancel removal operations before they are executed.

By default, when using any of the built-in editing directives, the Grid displays a confirmation dialog if the user attempts to remove a row.

Starting with Kendo UI for Angular v19.0.0, the removeConfirmation option of the Grid's editing directives defaults to true. In previous versions, you had to explicitly enable it.

The following example demonstrates the built-in confirmation dialog. Click the Remove button on any row to see the default behavior.

Change Theme

Theme

Loading ...

Disabling the Confirmation Dialog

If you want to disable the confirmation dialog and allow immediate row removal, set the removeConfirmation property of the Grid to false.

The following example demonstrates the Grid's behavior when the confirmation dialog is disabled—notice how rows are removed immediately without any confirmation prompt upon clicking a Remove button.

Change Theme

Theme

Loading ...

Custom Confirmation Dialog

For more control over the user experience, you can implement a custom confirmation dialog. This approach allows you to customize the dialog's appearance, content, and behavior according to your application's requirements.

To display a custom confirmation dialog, pass a custom callback function to the removeConfirmation option. The function is expected to return a Boolean value, which indicates whether the corresponding record should be removed.

If the function returns an Observable or a Promise, resolve it with a Boolean value.

The following example demonstrates how to display a custom confirmation dialog before removing a row.

Change Theme

Theme

Loading ...

To implement a custom confirmation dialog for row removal in the Grid:

1. Set up an RxJS Subject to handle the asynchronous communication between the Grid and your custom dialog:

   typescript

   public removeConfirmationSubject: Subject<boolean> = new Subject<boolean>();
   public itemToRemove: Product;

   The implementation uses RxJS Subject to handle the asynchronous nature of the confirmation dialog. The Grid waits for the Subject to emit a Boolean value before proceeding with or canceling the removal operation.

2. Create the removeConfirmation callback that will be invoked when the user attempts to remove a row. This function captures the current data item and returns the Subject that the Grid will subscribe to:

   TypeScript

   public removeConfirmation(dataItem: Product): Subject<boolean> {
       this.itemToRemove = dataItem;
       return this.removeConfirmationSubject;
   }

   HTML

   <kendo-grid
       [kendoGridBinding]="products"
       [kendoGridReactiveEditing]="createFormGroup"
       [removeConfirmation]="removeConfirmation"
   >
   </kendo-grid>

   The itemToRemove property tracks which item is being considered for removal, allowing the dialog to display specific information about the item.

3. Add your custom dialog that will display conditionally when an item is marked for removal. This demo uses the Kendo UI for Angular Dialog component:

   html

   @if (itemToRemove) {
   <kendo-dialog title="Please confirm" (close)="confirmRemove(false)">
       <p style="margin: 30px; text-align: center;">
           Are you sure you want to delete product {{ itemToRemove.ProductName }}?
       </p>
       <kendo-dialog-actions>
           <button kendoButton (click)="confirmRemove(false)">No</button>
           <button kendoButton themeColor="primary" (click)="confirmRemove(true)">Yes</button>
       </kendo-dialog-actions>
   </kendo-dialog>
   }

4. Implement a method that processes the user's interaction with the action buttons in the dialog, and communicates the response back to the Grid:

   typescript

   public confirmRemove(shouldRemove: boolean): void {
       this.removeConfirmationSubject.next(shouldRemove);
       this.itemToRemove = null;
   }

Suggested Links

• Angular Grid Editing Basics
• API Reference of the GridComponent
• API Index of the Grid