Attach Javascript with AutoGenerated Buttons of GridView control

This small post about how you can attach javascript confirm box with the the autogenerated delete button of the Gridview of Asp.net. This might be the old trick but this is helpful to the beginner developer.

Consider 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>
 

Now as you can see in the above code AutoGenerateDeleteButton="true" is true that means in grid You can see one delete button to remove record from the grid. But the requirement is I have to ask user weather he wants to delete record or not.

So to achieve this I made use of the RowDataBound and the javascript function confirm which ask user weather to delete record or not if user press yes than page get postback and it remove record from the grid and mark it as delete in my 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;";
     }
   }
}

Now as you can see in above code I am searching for the deletelinkbutton and attaching OnClick event of javascript with the control no 2 of the cell 0. Because autogenerated button are always place in cell 0 of the grid and here as you can see in code edit button is also auto generate which get place 1 in cell 0 of grid so autogenerated delete button get placed 2 in the cell 0.