Implement a Confirmation Dialog Based on Blazor Popup
- 6 minutes to read
Examples below demonstrate how to use Blazor Popup alongside our Grid and Scheduler components to create a custom confirmation dialog.
Implementation includes the following key steps:
- Add a DxPopup component to the page and configure its user capabilities.
- Add custom confirmation buttons to the popup’s content area.
- Handle the DxButton.Click event for both buttons.
- Customize the base component to invoke the custom dialog.
Configure the Popup Component
In this example, the dialog contains two buttons (Yes/No) and a user can only close the popup by pressing one of these buttons.
Set the component’s ShowCloseButton, CloseOnOutsideClick, and CloseOnEscape properties to
falseto disable default user capabilities.Add custom confirmation buttons to the component’s BodyContentTemplate tag.
<DxPopup @bind-Visible="@ConfirmationShown"
ShowCloseButton="false"
CloseOnOutsideClick="false"
CloseOnEscape="false"
Width="400px">
<BodyContentTemplate>
@* ... *@
<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>
Integrate the Popup Component into the Grid Component
Confirm Editing Cancellation
When a user starts to edit another row in the Grid component without first saving changes, the component discards these changes. You can show a confirmation dialog to remind users about unsaved changes. Follow the steps below to implement this:
Add content to the popup’s
BodyContentTemplate:<DxPopup @bind-Visible="IsPopupVisible" HeaderText="Modify a Record" ShowCloseButton="true" Closed="Popup_Closed"> <BodyContentTemplate> <p>Your data item has been modified. Do you want to save your changes?</p> @* ... *@ </BodyContentTemplate> </DxPopup>Configure the Grid component to allow users to edit grid data, for example:
<DxGrid @ref="Grid" Data="Forecasts" EditMode="GridEditMode.EditRow" EditModelSaving="Grid_EditModelSaving" CssClass="mw-1100"> @* ... *@ </DxGrid> @* ... *@ @code { @* ... *@ void Grid_EditModelSaving(GridEditModelSavingEventArgs e) { var dataItem = (WeatherForecast)e.DataItem; var editModel = (WeatherForecast)e.EditModel; dataItem.Date = editModel.Date; dataItem.TemperatureC = editModel.TemperatureC; } @* ... *@ }In response to a click on the No button, set the DxPopup’s Visible property to
falseto close the pop-up window. When a user clicks Yes, call the DxGrid’s SaveChangesAsync() method to save the changes and close the pop-up window.@code { @* ... *@ async Task ButtonSave_Click() { await Grid.SaveChangesAsync(); IsPopupVisible = false; } async Task ButtonCancel_Click() { IsPopupVisible = false; } @* ... *@ }Use the command column’s CellDisplayTemplate to replace a built-in Edit button with a custom button. When a user clicks the custom button, check whether the component data was modified. Show the pop-up window if the Grid component has unsaved changes; otherwise, start editing the clicked row.
<DxGrid @ref="Grid" Data="Forecasts" EditMode="GridEditMode.EditRow" EditModelSaving="Grid_EditModelSaving" CssClass="mw-1100"> <Columns> <DxGridCommandColumn NewButtonVisible="false" DeleteButtonVisible="false"> <CellDisplayTemplate> <DxButton Click="() => GridEditButton_Click(context)" Text="Edit" RenderStyle="ButtonRenderStyle.Link" /> </CellDisplayTemplate> </DxGridCommandColumn> @* ... *@ </Columns> </DxGrid> @* ... *@ @code { @* ... *@ async Task GridEditButton_Click(GridColumnCellDisplayTemplateContext context) { if(context.Grid.IsEditing() && GridEditContext.IsModified()) { SavedDataItem = context.DataItem; IsPopupVisible = true; } else await context.Grid.StartEditDataItemAsync(context.DataItem); } @* ... *@ }Once the pop-up window closes, start editing the clicked row.
@code { @* ... *@ async Task Popup_Closed() { if(SavedDataItem != null) { await Grid.StartEditDataItemAsync(SavedDataItem); SavedDataItem = null; } } }
Confirm Delete Operations
When a user deletes a row or data item in DevExpress Blazor Grid, the default delete confirmation dialog appears. To display a custom confirmation dialog when a user deletes a row in DxGrid, complete the following steps:
Configure DxPopup to create a custom confirmation dialog and display row-specific data to the popup’s content area. The code sample below demonstrates how to add the
IDproperty value of the processed row to the popup’sBodyContentTemplatetag:<DxPopup @bind-Visible="@ConfirmationShown" HeaderText="Delete a record" Width="auto" CloseOnOutsideClick="false"> <BodyContentTemplate> <p>You are about to delete the record with the id = @id. Are you sure?</p> @* ... *@ </BodyContentTemplate> </DxPopup>In DxGrid, use the command column’s CellDisplayTemplate property to create a custom Delete button.
<DxGridCommandColumn Width="70px" NewButtonVisible="false"> <CellDisplayTemplate Context="myContext"> <DxButton RenderStyle="ButtonRenderStyle.Link" RenderStyleMode="ButtonRenderStyleMode.Contained" Text="Delete" Click="@(() => OnDeleteButtonClick(myContext))" /> </CellDisplayTemplate> </DxGridCommandColumn>Display a confirmation dialog when a user clicks the Delete button.
@code { bool ConfirmationShown { get; set; } = false; @* ... *@ void OnDeleteButtonClick(GridCommandColumnCellDisplayTemplateContext context) { id = (context.DataItem as WeatherForecast).ID; ConfirmationShown = true; } @* ... *@ }Handle button Click events to delete a row or cancel the current delete operation. After a user clicks a button, the code hides the pop-up window.
@code { @* ... *@ void OnYesButtonClick() { forecasts.Remove(forecasts.Find(m => m.ID == id)); myGrid.Reload(); ConfirmationShown = false; } void OnNoButtonClick() { ConfirmationShown = false; } }
Integrate the Popup Component in the Scheduler Component
To display a confirmation dialog when a user deletes an appointment in Scheduler, complete the following steps:
Add content to the popup’s
BodyContentTemplate:<DxPopup @bind-Visible="@ConfirmationShown" @* ... *@ Width="400px"> <BodyContentTemplate> <p>@BodyText</p> @* ... *@ </BodyContentTemplate> </DxPopup> @* ... *@ @code { bool ConfirmationShown { get; set; } = false; @* ... *@ string BodyText { get; set; } = string.Empty; @* ... *@ }Handle the DxScheduler component’s AppointmentRemoving event to display a confirmation dialog when a user deletes an appointment. In the handler, asynchronously call the ConfirmOperation method.
@code { @* ... *@ async Task OnAppointmentRemoving(SchedulerAppointmentOperationEventArgs args) { args.Cancel = !(await confDialog.ConfirmOperation("Delete an appointment", "Are you sure you want to delete this appointment?")); } @* ... *@ }The ConfirmOperation method uses a TaskCompletionSource object to create a task that is explicitly controlled by TaskCompletionSource methods.
@code { 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; } @* ... *@ }In click handlers for dialog buttons, call the SetResult method and pass the corresponding resulting value to the task. Based on the result, delete the appointment or cancel the current operation.
@code { @* ... *@ private void YesClick() { tcs.SetResult(true); } private void NoClick() { tcs.SetResult(false); } public void Dispose() { tcs = null; } }
