Popup for Blazor - How to implement a confirmation dialog

This example demonstrates how to use DevExpress Blazor Popup to create a custom confirmation dialog for delete operations in DevExpress Blazor Scheduler.

Overview

Follow the steps below to implement a confirmation dialog:

1. Creare a confirmation dialog component (ConfirmationDialog). Populate it with a DxPopup component, disable default user actions that dismiss the popup, and add custom buttons to the component's content area.

   <DxPopup @bind-Visible="@ConfirmationShown" 
            HeaderText="@HeaderText"
            HeaderCssClass="confirmation-dialog-header"
            ShowCloseButton="false" 
            CloseOnOutsideClick="false" 
            CloseOnEscape="false" 
            Width="400px">
       <BodyContentTemplate>
           <p>@BodyText</p>
           <div class="confirmation-dialog-content">
               <DxButton Text="Yes" Click="YesClick" RenderStyle="ButtonRenderStyle.Primary"></DxButton>
               <DxButton Text="No" Click="NoClick" RenderStyle="ButtonRenderStyle.Secondary"></DxButton>
           </div>
       </BodyContentTemplate>
   </DxPopup>  

2. Handle the DxSсheduler component's AppointmentRemoving event to display a confirmation dialog when a user attempts to delete an appointment.

   <DxScheduler AppointmentRemoving="OnAppointmentRemoving" ...
   
   @code {
       ConfirmationDialog confDialog;
       async Task OnAppointmentRemoving(SchedulerAppointmentOperationEventArgs args) {
           args.Cancel = !(await confDialog.ConfirmOperation("Delete an appointment",
               "Are you sure you want to delete this appointment?"));
       }
   }

3. Create a task that displays the confirmation form. Handle button clicks to store user choice - confirm or cancel. The scheduler's event reads the user choice and cancels deletion if necessary.

   bool ConfirmationShown { get; set; } = false;
   string HeaderText { get; set; } = string.Empty;
   string BodyText { get; set; } = string.Empty;
   TaskCompletionSource<bool> tcs;
   
   public Task<bool> ConfirmOperation(string headerText, string bodyText) {
       HeaderText = headerText;
       BodyText = bodyText;
       ConfirmationShown = true;
       InvokeAsync(StateHasChanged);
   
       tcs = new TaskCompletionSource<bool>();
       tcs.Task.ContinueWith(_ => {
           ConfirmationShown = false;
       });
       return tcs.Task;
   }
   private void YesClick() {
       tcs.SetResult(true);
   }
   private void NoClick() {
       tcs.SetResult(false);
   }
   public void Dispose() {
       tcs = null;
   }

Files to Review

• ConfirmationDialog.razor
• Index.razor

Documentation

• DxScheduler - Manage Appointments
• Confirmation Dialog Based on DevExpress Blazor Message Box

More Examples

• Grid for Blazor - Create a custom record deletion confirmation dialog

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)