New to Kendo UI for Angular? Start a free 30-day trial

Angular TreeList Confirmation on Row Removal

Updated on Jun 11, 2026

The Angular TreeList provides 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.

To display a confirmation dialog when removing a row, use the removeConfirmation option. The function is expected to return a value, which indicates whether the corresponding record should be removed.

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

Change Theme

Theme

Loading ...

Implementation

To implement a confirmation dialog for row removal in the TreeList:

Set up an RxJS Subject to handle the asynchronous communication between the TreeList and your dialog:
TS
```
public removeConfirmationSubject: Subject<boolean> = new Subject<boolean>();
public itemToRemove: any;
```
The implementation uses RxJS Subject to handle the asynchronous nature of the confirmation dialog. The TreeList waits for the Subject to emit a Boolean 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 the Subject that the TreeList will subscribe to:
TypeScript
```
public removeConfirmation(dataItem: any): Subject<boolean> {
    this.itemToRemove = dataItem;
    return this.removeConfirmationSubject;
}
```
HTML
```
<kendo-treelist
    [kendoTreeListFlatBinding]="data"
    [kendoTreeListReactiveEditing]="createFormGroup"
    [removeConfirmation]="removeConfirmation"
>
</kendo-treelist>
```
The itemToRemove property tracks which item is being considered for removal, allowing the dialog to display specific information about the item.

Add a dialog that will display conditionally when an item is marked for removal. This implementation 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 {{ itemToRemove.name }}?
    </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 TreeList:

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

Angular TreeList Confirmation on Row Removal

Implementation

See Also