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 totrue
. 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.
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.
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 aPromise
, resolve it with aBoolean
value.
The following example demonstrates how to display a custom confirmation dialog before removing a row.
To implement a custom confirmation dialog for row removal in the Grid:
-
Set up an RxJS
Subject
to handle the asynchronous communication between the Grid and your custom dialog:typescriptpublic 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 theSubject
to emit aBoolean
value before proceeding with or canceling the removal operation. -
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 theSubject
that the Grid will subscribe to:TypeScriptpublic removeConfirmation(dataItem: Product): Subject<boolean> { this.itemToRemove = dataItem; return this.removeConfirmationSubject; }
The
itemToRemove
property tracks which item is being considered for removal, allowing the dialog to display specific information about the item. -
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> }
-
Implement a method that processes the user's interaction with the action buttons in the dialog, and communicates the response back to the Grid:
typescriptpublic confirmRemove(shouldRemove: boolean): void { this.removeConfirmationSubject.next(shouldRemove); this.itemToRemove = null; }