Grid for Blazor - Create a custom record deletion confirmation dialog

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;
  }
  

Files to Review

• Index.razor

Documentation

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

More Examples

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

Does this example address your development requirements/objectives?

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