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.
JavaScriptfunction 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.
JavaScriptfunction OnClickYes(s, e) {
grid.DeleteRow(visibleIndex);
popup.Hide();
}
function OnClickNo(s, e) {
popup.Hide();
}
Files to Look At
- Default.aspx (VB: Default.aspx)
More Examples
- GridView for MVC - How to show a confirmation dialog using PopupControl
- Popup Control for Web Forms - How to implement a delete confirm dialog with a "Don't ask me again" option
Example Code
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>