This example demonstrates how to implement a delete confirmation dialog with an option to prevent its display for subsequent grid row deletions.
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 clientrowVisibleIndex
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
- TestData.cs (VB: TestData.vb)
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
- WebUserControl.ascx (VB: WebUserControl.ascx)
- WebUserControl.ascx.cs (VB: WebUserControl.ascx.vb)
Documentation
More Examples
- How to include a deleted row KeyField value into the delete confirmation dialog
- How to insert (or update) ASPxTreeList's row by clicking on an external button and delete rows with custom confirmation popup window
- How to show a confirmation dialog using ASPxPopupControl
Example Code
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;
}
}
}
}
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>
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");
}
}
}
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 ask for 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>