Example E1120
Visible to All Users

Grid View for ASP.NET Web Forms - How to implement a delete confirmation dialog with a "don't ask me again" option

This example demonstrates how to implement a delete confirmation dialog with an option to prevent its display for subsequent grid row deletions.

Delete Confirmation Dialog

Implementation Details

The confirm dialog is based on the ASPxPopupControl. The popup contains the dialog content wrapped in a WebUserControl.

Note: In this example, the "Don't ask for confirmation" check box's value is stored in a client JavaScript variable (dontAskConfirmation). We recommend that in a real-life application, you save this value to a user-specific storage such as cookies or user profile settings.

The example application uses the following techniques:

  • The ID field value of the processed row is stored in the client rowVisibleIndex variable.
  • The ASPxPopupControl is made transparent so that it displays its child ASPxRoundPanel as the dialog's immediate container.
  • The ASPxPopupControl is used in modal mode and configured to always be displayed at the Grid View's center.
  • The "Yes" button is the dialog's default button (its ID is assigned to the ASPxRoundPanel's DefaultButton property), so users can press Enter to submit the dialog. The "Yes" button programmatically receives the input focus after the dialog is shown.

Files to Review

Documentation

More Examples

Example Code

Solution/App_Code/TestData.cs(vb)
C#
using System.ComponentModel; using System.Web; using System.Web.SessionState; public class DataRow { private int fId; private string fDescription; public DataRow(int id, string description){ fId = id; fDescription = description; } public int ID { get { return fId; } set { fId = value; } } public string Description { get { return fDescription;} set { fDescription = value; } } } public class GridDataSource { HttpSessionState Session { get { return HttpContext.Current.Session; } } public BindingList<DataRow> GetRows() { if (Session["GridDataSource"] == null) CreateRows(); return Session["GridDataSource"] as BindingList<DataRow>; } public void CreateRows() { BindingList<DataRow> res = new BindingList<DataRow>(); for (int i = 1; i <= 25; i++){ DataRow item = new DataRow(i, "Sample data for row " + i); res.Add(item); } Session["GridDataSource"] = res; } public void DeleteRow(int id) { BindingList<DataRow> rows = Session["GridDataSource"] as BindingList<DataRow>; for (int i = 0; i < rows.Count; i++) { if (rows[i].ID == id){ rows.Remove(rows[i]); break; } } } }
Solution/Default.aspx
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Solution.Default" %> <%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Delete Confirm Dialog</title> <script type="text/javascript"> var dontAskConfirmation; //Store the value specifying whether delete operations should be confirmed var rowVisibleIndex; //Store the visible index of the grid row to be deleted function popupControl_Init(s, e) { //Synchronize the client variable's value with the confirm dialog checkbox' setting dontAskConfirmation = cbDontAsk.GetChecked(); } function grid_CustomButtonClick(s, e) { if (e.buttonID != 'del') return; //If confirmation is not required, delete the processed grid row if (dontAskConfirmation) DeleteGridRow(e.visibleIndex); //If confirmation is required, preserve the row's visible index and show the confirmation dialog, passing it the row's ID value else { rowVisibleIndex = e.visibleIndex; s.GetRowValues(e.visibleIndex, 'ID', ShowPopup); } } function ShowPopup(rowId) { //Assign the row's ID value to a specific label within the confirmation dialog, show the dialog, and set focus to the Yes button lbRowId.SetText(rowId); popupControl.Show(); btnYes.Focus(); } function cbDontAsk_CheckedChanged(s, e) { //Synchronize the client variable's value with the confirm dialog checkbox' setting, and focus the Yes button dontAskConfirmation = cbDontAsk.GetChecked(); btnYes.Focus(); } function btnYes_Click(s, e) { ClosePopup(true); } function btnNo_Click(s, e) { ClosePopup(false); } function ClosePopup(result) { popupControl.Hide(); if (result) DeleteGridRow(rowVisibleIndex); } function DeleteGridRow(visibleIndex) { gridView.DeleteRow(visibleIndex); } </script> </head> <body> <form id="form1" runat="server"> <dx:ASPxButton ID="btnReloadDemo" runat="server" OnClick="btnReloadDemo_Click" Text="Reload demo"> </dx:ASPxButton> <dx:aspxgridview id="ASPxGridView1" runat="server" clientinstancename="gridView" datasourceid="ObjectDataSource1" keyfieldname="ID" autogeneratecolumns="False"> <settingsbehavior columnresizemode="Control" /> <clientsideevents custombuttonclick="grid_CustomButtonClick" /> <columns> <dx:gridviewcommandcolumn visibleindex="0" width="100px"> <custombuttons> <dx:gridviewcommandcolumncustombutton text="Delete" id="del"> </dx:gridviewcommandcolumncustombutton> </custombuttons> </dx:gridviewcommandcolumn> <dx:gridviewdatatextcolumn fieldname="ID" readonly="True" visibleindex="1" width="50px"> </dx:gridviewdatatextcolumn> <dx:gridviewdatatextcolumn fieldname="Description" visibleindex="2" width="200px"> </dx:gridviewdatatextcolumn> </columns> </dx:aspxgridview> <dx:aspxpopupcontrol id="ASPxPopupControl1" runat="server" clientinstancename="popupControl"> <clientsideevents init="popupControl_Init" /> <contentcollection> <dx:popupcontrolcontentcontrol runat="server"> <uc1:webusercontrol id="WebUserControl1" runat="server" /> </dx:popupcontrolcontentcontrol> </contentcollection> </dx:aspxpopupcontrol> <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetRows" TypeName="GridDataSource" DeleteMethod="DeleteRow"> <DeleteParameters> <asp:Parameter Name="id" Type="Int32" /> </DeleteParameters> </asp:ObjectDataSource> <br /> </form> </body> </html>
Solution/Default.aspx.cs(vb)
C#
using System; namespace Solution { public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) CustomizePopupControlAppearance(); } void CustomizePopupControlAppearance() { ASPxPopupControl1.Modal = true; // Make the ASPxPopupControl's elements invisible ASPxPopupControl1.BackColor = System.Drawing.Color.Transparent; ASPxPopupControl1.Border.BorderWidth = 0; ASPxPopupControl1.ContentStyle.Paddings.Padding = 0; ASPxPopupControl1.ShowHeader = false; ASPxPopupControl1.ShowSizeGrip = DevExpress.Web.ShowSizeGrip.False; ASPxPopupControl1.ShowShadow = false; // Specify that the ASPxPopupControl can only be invoked and closed programmatically ASPxPopupControl1.PopupAction = DevExpress.Web.PopupAction.None; ASPxPopupControl1.CloseAction = DevExpress.Web.CloseAction.None; // Make the ASPxPopupControl displayed centered within the ASPxGridView ASPxPopupControl1.PopupElementID = "ASPxGridView1"; ASPxPopupControl1.PopupHorizontalAlign = DevExpress.Web.PopupHorizontalAlign.Center; ASPxPopupControl1.PopupVerticalAlign = DevExpress.Web.PopupVerticalAlign.Middle; } protected void btnReloadDemo_Click(object sender, EventArgs e) { // Reset the grid's data source Session["GridDataSource"] = null; Response.Redirect("Default.aspx"); } } }
Solution/WebUserControl.ascx
Code
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl.ascx.cs" Inherits="Solution.WebUserControl1" %> <dx:ASPxRoundPanel ID="ASPxRoundPanel1" runat="server" BackColor="LightGray" Width="300px" HeaderText="Delete Confirmation" DefaultButton="btnYes"> <PanelCollection> <dx:PanelContent runat="server"> <table> <tr> <td rowspan="2"> <dx:ASPxImage ID="ASPxImage1" runat="server" ImageUrl="~/Images/img1.png"> </dx:ASPxImage> </td> <td> <dx:ASPxLabel ID="ASPxLabel1" runat="server" Text="Are you sure you want to delete this row?"> </dx:ASPxLabel> </td> </tr> <tr> <td> <dx:ASPxLabel ID="ASPxLabel2" runat="server" Text="Row ID: " > </dx:ASPxLabel> <dx:ASPxLabel ID="ASPxLabel3" runat="server" Text="" ClientInstanceName="lbRowId" Font-Bold="True"> </dx:ASPxLabel> </td> </tr> </table> <br /> <table> <tr> <td> <dx:ASPxCheckBox ID="cbDontAsk" runat="server" Text="Don't&nbsp;ask&nbsp;for&nbsp;confirmation" ClientInstanceName="cbDontAsk"> <ClientSideEvents CheckedChanged="cbDontAsk_CheckedChanged" /> </dx:ASPxCheckBox> </td> <td style="width:100%"> </td> <td> <dx:ASPxButton ID="btnYes" runat="server" Text="Yes" Width="50px" AutoPostBack="False" ClientInstanceName="btnYes"> <ClientSideEvents Click="btnYes_Click" /> </dx:ASPxButton> </td> <td> <dx:ASPxButton ID="btnNo" runat="server" Text="No" Width="50px" AutoPostBack="False"> <ClientSideEvents Click="btnNo_Click" /> </dx:ASPxButton> </td> </tr> </table> </dx:PanelContent> </PanelCollection> </dx:ASPxRoundPanel>
Solution/WebUserControl.ascx.cs(vb)
C#
using System; namespace Solution { public partial class WebUserControl1 : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { } } }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.