Grid View for ASP.NET Web Forms - How to show a confirmation dialog box on a custom button click

This example demonstrates how to create a custom Delete button and show a confirmation pop-up window on a button click.

Overview

Follow the steps below to configure the grid's confirm functionality:

1. Use a command column's CustomButtons property to create a custom Delete button.

   <Columns>
       <dx:GridViewCommandColumn VisibleIndex="0" ShowClearFilterButton="True">
           <CustomButtons>
               <dx:GridViewCommandColumnCustomButton ID="btDelete" Text="Delete"
                   Visibility="AllDataRows" />
           </CustomButtons>
       </dx:GridViewCommandColumn>
       <!-- ... -->

2. Handle the grid's server-side CustomButtonCallback event to perform server-side actions on a custom button click. Use the grid's JSProperties property to pass the row's visible index to the server and indicate whether to show a confirmation pop-up window when the callback ends.

   function gvProducts_EndCallback(s, e) {
       if (s.cpShowDeleteConfirmBox)
           pcConfirm.Show();
   }

   protected void gvProducts_CustomButtonCallback(object sender, ASPxGridViewCustomButtonCallbackEventArgs e) {
       ASPxGridView gridView = sender as ASPxGridView;
       if (e.ButtonID == "btDelete") {
   
           // Perform custom server-side actions before showing a pop-up window
   
           gridView.JSProperties["cpRowIndex"] = e.VisibleIndex;
           gridView.JSProperties["cpShowDeleteConfirmBox"] = true;
       }
   }

3. To configure the grid's row delete functionality, handle the grid's server-side RowDeleting event.

Files to Review

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

Documentation

• Passing Values Between Client and Server Sides
• Update a Control on Another Contol's Callback