Confirm dialog

Hello Radzen team,
i want to implement a user confirmation dialog (e.g. “Delete Record?” Buttons “Yes”/“No”) before deleting a record. In every page.
What is the best way to do this?

Kind Regards
Thomas

1 Like

Hi Thomas,

This can be done by setting the Condition of the invoke which deletes the item to confirm('Are you sure?')

3 Likes

Is it possible to use the built in Confirm Dialog used in grids for deleting records?

Could you elaborate?

On the grid we have these properties:
image

Which produces this confirmation dialog when deleting a record:
image

Is there a way to use that modal dialog in other contexts in the app (outside the grid delete event)?

This is doable but requires some extra code.

  1. Open the app.module.ts file and set its contents to the following
import {NgModule} from '@angular/core';
import {ServiceWorkerModule} from '@angular/service-worker';
import {environment} from '../environments/environment';
import {
  AppImports,
  AppComponent,
  AppDeclarations,
  AppProviders
} from './app.module-generated';

import {ConfirmationService} from 'primeng/components/common/api';
import {ConfirmDialogModule} from 'primeng/components/confirmdialog/confirmdialog';

@NgModule({
  declarations: [...AppDeclarations],
  imports: [
    environment.production
      ? ServiceWorkerModule.register('ngsw-worker.js')
      : [],
    ConfirmDialogModule,
    ...AppImports
  ],
  providers: [...AppProviders, ConfirmationService],
  bootstrap: [AppComponent]
})
export class AppModule {}
  1. Open the *.component.ts file of your page and add this code
    import {ConfirmationService} from 'primeng/components/common/api';
  2. Inject the ConfirmationService in the constructor and add a new method confirm:
  constructor(
    injector: Injector,
    private confirmationService: ConfirmationService
  ) {
    super(injector);
  }

  confirm(message: string): Promise<boolean> {
    return new Promise((resolve, reject) => {
      this.confirmationService.confirm({
        message,
        header: 'Are you sure?',
        acceptLabel: 'YES',
        rejectLabel: 'NO',
        accept: () => {
          resolve(true);
        },
        reject: () => {
          resolve(false);
        }
      });
    });
  }
  1. Add a HTML component with content <p-confirmDialog></p-confirmDialog> to your page in Radzen.
  2. Then in Radzen you can invoke the confirm function and get the confirmation ${result} (true/false) in the Then event.


    I have attached a sample application.confirmation-service.zip (28.4 KB)
1 Like

I tried another solution by creating one page to serve that purpose. It receives only one parameter, the "text" to show, and has two buttons, one "ok" that closes the dialog and sets the result to false and another to "cancel" and set the result to true.

When I want to use it I just open that page in a dialog and use the returned ${result} (true or false).

I find this solution cleaner.