Click here to Skip to main content
11,642,216 members (61,763 online)
Click here to Skip to main content

Attach JavaScript with Auto-Generated Buttons of the GridView Control

, 7 Feb 2013 CPOL 10.4K 3
Rate this:
Please Sign up or sign in to vote.
Attach JavaScript with auto-generated buttons of the GridView control.

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

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Pranay Rana
Software Developer (Senior) GMind Solusion
India India

Microsoft C# MVP (12-13)


Hey, I am Pranay Rana, working as a ITA in MNC. Web development in Asp.Net with C# and MS sql server are the experience tools that I have had for the past 5.5 years now.

For me def. of programming is : Programming is something that you do once and that get used by multiple for many years

You can visit my blog

StackOverFlow - http://stackoverflow.com/users/314488/pranay
My CV :- http://careers.stackoverflow.com/pranayamr

Awards:



Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150731.1 | Last Updated 7 Feb 2013
Article Copyright 2012 by Pranay Rana
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid