Example T103862
Visible to All Users

GridView for Web Forms - How to use ASPxPopupControl to show a confirmation dialog

Grid View - Confirmation message

In this example, the ASPxGridView control contains a custom Delete button.

ASPx
<dx:GridViewCommandColumn ShowNewButtonInHeader="true" ShowEditButton="true"> <CustomButtons> <dx:GridViewCommandColumnCustomButton ID="deleteButton" Text="Delete" /> </CustomButtons> </dx:GridViewCommandColumn>

The client CustomButtonClick event handler shows ASPxPopupControl when a user clicks the Delete button.

JavaScript
function OnCustomButtonClick(s, e) { visibleIndex = e.visibleIndex; popup.Show(); }
ASPx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" Text="Are you sure?" ClientInstanceName="popup"> <ContentCollection> <dx:PopupControlContentControl> <dx:ASPxButton ID="yesButton" runat="server" Text="Yes" AutoPostBack="false"> <ClientSideEvents Click="OnClickYes" /> </dx:ASPxButton> <dx:ASPxButton ID="noButton" runat="server" Text="No" AutoPostBack="false"> <ClientSideEvents Click="OnClickNo" /> </dx:ASPxButton> </dx:PopupControlContentControl> </ContentCollection> </dx:ASPxPopupControl>

When a user clicks the Yes button, the Click event handler calls the DeleteRow method.

JavaScript
function OnClickYes(s, e) { grid.DeleteRow(visibleIndex); popup.Hide(); } function OnClickNo(s, e) { popup.Hide(); }

Files to Look At

More Examples

Example Code

Default.aspx
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="DevExpress.Web.v13.2, Version=13.2.15.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <script type="text/javascript"> var visibleIndex; function OnCustomButtonClick(s, e) { visibleIndex = e.visibleIndex; popup.Show(); } function OnClickYes(s, e) { grid.DeleteRow(visibleIndex); popup.Hide(); } function OnClickNo(s, e) { popup.Hide(); } </script> <div> <dx:ASPxGridView ID="GridView" runat="server" DataSourceID="sqlData" KeyFieldName="ProductID" ClientInstanceName="grid" AutoGenerateColumns="False"> <ClientSideEvents CustomButtonClick="OnCustomButtonClick" /> <Columns> <dx:GridViewDataTextColumn FieldName="ProductID" ReadOnly="True" /> <dx:GridViewDataTextColumn FieldName="ProductName" /> <dx:GridViewDataTextColumn FieldName="CategoryID" VisibleIndex="2" /> <dx:GridViewDataTextColumn FieldName="UnitsInStock" VisibleIndex="3" /> <dx:GridViewDataCheckColumn FieldName="Discontinued" VisibleIndex="4" /> <dx:GridViewCommandColumn ShowNewButtonInHeader="true" ShowEditButton="true"> <CustomButtons> <dx:GridViewCommandColumnCustomButton ID="deleteButton" Text="Delete" /> </CustomButtons> </dx:GridViewCommandColumn> </Columns> </dx:ASPxGridView> <dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" Text="Are you sure?" ClientInstanceName="popup"> <ContentCollection> <dx:PopupControlContentControl> <dx:ASPxButton ID="yesButton" runat="server" Text="Yes" AutoPostBack="false"> <ClientSideEvents Click="OnClickYes" /> </dx:ASPxButton> <dx:ASPxButton ID="noButton" runat="server" Text="No" AutoPostBack="false"> <ClientSideEvents Click="OnClickNo" /> </dx:ASPxButton> </dx:PopupControlContentControl> </ContentCollection> </dx:ASPxPopupControl> <asp:SqlDataSource ID="sqlData" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWINDConnectionString %>" DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = @ProductID" InsertCommand="INSERT INTO [Products] ([ProductID], [ProductName], [CategoryID], [UnitsInStock], [Discontinued]) VALUES (@ProductID, @ProductName, @CategoryID, @UnitsInStock, @Discontinued)" SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [UnitsInStock], [Discontinued] FROM [Products]" UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [CategoryID] = @CategoryID, [UnitsInStock] = @UnitsInStock, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID"> <DeleteParameters> <asp:Parameter Name="ProductID" Type="Int32" /> </DeleteParameters> <InsertParameters> <asp:Parameter Name="ProductID" Type="Int32" /> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="CategoryID" Type="Int32" /> <asp:Parameter Name="UnitsInStock" Type="Int16" /> <asp:Parameter Name="Discontinued" Type="Boolean" /> </InsertParameters> <UpdateParameters> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="CategoryID" Type="Int32" /> <asp:Parameter Name="UnitsInStock" Type="Int16" /> <asp:Parameter Name="Discontinued" Type="Boolean" /> <asp:Parameter Name="ProductID" Type="Int32" /> </UpdateParameters> </asp:SqlDataSource> </div> </form> </body> </html>

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.