Delete Confirmation for Delete ButtonField, TemplateField and CommandField in a GridView in ASP.NET
Introduction:
This article explains how to add delete confirmation for ButtonField, CommandField and TemplateField columns in a GridView. In this example, I am using a GridView and delete buttons to just hide the row to keep the demo simple.
Markup:
CodeBehind:
Description:
We need to set OnClientClick for a button to return confirmation result. We need to set Onclick attribute for ButtonField and CommandField. In this example, I am using RowDeleting Event to delete Row. We can also use RowCommand with our desired Command Name.
This article explains how to add delete confirmation for ButtonField, CommandField and TemplateField columns in a GridView. In this example, I am using a GridView and delete buttons to just hide the row to keep the demo simple.
Markup:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server" Font-Names="Tahoma" Font-Size="Small" CellPadding="4" BorderColor="#507CD1" BorderStyle="Solid" AutoGenerateColumns="false" ForeColor="#333333" GridLines="None" OnRowDataBound="GridView1_RowDataBound" OnRowDeleting="GridView1_RowDeleting"> <AlternatingRowStyle BackColor="White" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#EFF3FB" /> <Columns> <asp:BoundField DataField="Id" HeaderText="Id" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:CommandField ShowDeleteButton="true" HeaderText="CommandField" DeleteText="Delete" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" ButtonType="Button" /> <asp:ButtonField CommandName="Delete" HeaderText="ButtonField" Text="Delete" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" ButtonType="Button" /> <asp:TemplateField HeaderText="TemplateField" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right"> <ItemTemplate> <asp:Button Text="Delete" ID="btnDelete" runat="server" CommandName="Delete" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html>
CodeBehind:
using System; using System.Linq; using System.Web.UI.WebControls;
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //Test Records for demo GridView1.DataSource = Enumerable.Range(1, 10).Select(a => new { Id = a, Name = String.Format("Test Name {0}", a) }); GridView1.DataBind(); } } protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { //Find ButtonField Button deleteButtonField = e.Row.Cells[3].Controls[0] as Button; //Find Template Field Delete button with Control ID Button deleteTemplateField = e.Row.FindControl("btnDelete") as Button; //Find Delete Command Field Button deleteCommandField = e.Row.Cells[2].Controls[0] as Button; //Add onclick attributes for Delete button Field amd Command Field deleteButtonField.Attributes["onclick"] = string.Format("if(confirm('Are You Sure?')) __doPostBack('{0}','{1}${2}'); else return false;", GridView1.ClientID, deleteButtonField.CommandName, deleteButtonField.CommandArgument); deleteCommandField.Attributes["onclick"] = string.Format("if(confirm('Are You Sure?')) __doPostBack('{0}','{1}${2}'); else return false;", GridView1.ClientID, deleteButtonField.CommandName, deleteButtonField.CommandArgument); //Set OnClientClick attribute for Delete Button deleteTemplateField.OnClientClick = "return confirm('Are You Sure?');"; } } protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e) { //Test Code to hide the row GridView1.Rows[e.RowIndex].Visible = false; }
Description:
We need to set OnClientClick for a button to return confirmation result. We need to set Onclick attribute for ButtonField and CommandField. In this example, I am using RowDeleting Event to delete Row. We can also use RowCommand with our desired Command Name.
Comments