The example uses the DevExpress Blazor Popup control (DxPopup) alongside our Blazor Grid (to create a custom confirmation dialog).

The project illustrates how you can incorporate the following capabilities into your Blazor-powered web application:

• Create a custom confirmation dialog with the Yes and No buttons.

  <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> <div class="confirm-dialog-buttons"> <DxButton Text="Yes" RenderStyle="ButtonRenderStyle.Primary" Click="@OnYesButtonClick" /> <DxButton Text="No" RenderStyle="ButtonRenderStyle.Secondary" Click="@OnNoButtonClick" /> </div> </BodyContentTemplate> </DxPopup>

• Add a custom Delete button to a Blazor Grid column.

  <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.

  bool ConfirmationShown { get; set; } = false; void OnDeleteButtonClick(GridCommandColumnCellDisplayTemplateContext context) { id = (context.DataItem as WeatherForecast).ID; ConfirmationShown = true; }

• Delete the record when a user clicks the Yes button.

  void OnYesButtonClick() { forecasts.Remove(forecasts.Find(m => m.ID == id)); myGrid.Reload(); ConfirmationShown = false; } void OnNoButtonClick() { ConfirmationShown = false; } 

• Index.razor

• Grid: Data Binding
• Grid: Edit Data and Validate Input
• Show and Close a Popup
• Confirmation Dialog Based on DevExpress Blazor Message Box

• Grid for Blazor - How to edit a row on a separate page

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