This small post is about how you can attach a JavaScript confirm box with the auto-generated Delete button of the GridView control in ASP.NET. This might be an old trick but is helpful to beginner developers.

Consider the following ASPX grid code:

<asp:GridView ID="GridView1" runat="server" AutoGenerateDeleteButton="true"
   AutoGenerateColumns="false" AutoGenerateEditButton="True" 
   onrowcancelingedit="GridView1_RowCancelingEdit" 
   onrowdeleting="GridView1_RowEditing" onrowupdating="GridView1_RowUpdating"
   onrowdatabound="GridView1_RowDataBound"
   <Columns>
    <asp:BoundField DataField="EMPID" HeaderText="EmployeeID" />
    <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
    <asp:BoundField DataField="LastName" HeaderText="LastName" />
    <asp:BoundField DataField="Address" HeaderText="Address" />
   </Columns>>
</asp:GridView>

As you can see in the above code, AutoGenerateDeleteButton="true" means in the grid you can see a delete button to remove the record from the grid. But the requirement is I have to ask the user whether he wants to delete the record or not.

So to achieve this I made use of the RowDataBound event and the JavaScript function confirm which asks the user whether to delete a record or not, if the user presses yes then page gets a postback and it removes the record from the grid and marks it as deleted in the database.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
     if (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState ==
                                            DataControlRowState.Alternate)
     {
         ((LinkButton)e.Row.Cells[0].Controls[2]).Attributes["onclick"] = 
               "if(!confirm('Are you sure to delete this row?'))return   false;";
     }
   }
}

As you can see in the above code I am searching for the deletelinkbutton and attaching an OnClick event of JavaScript with the control number 2 of the cell 0. Because auto-generated buttons are always placed in cell 0 of the grid and here as you can see in the code, the edit button is also auto generated which gets placed first in cell 0 of the grid so the auto-generated delete button gets placed 2 in cell 0.