Click here to Skip to main content
13,597,282 members
Click here to Skip to main content
Add your own
alternative version

Stats

13.5K views
4 bookmarked
Posted 13 Aug 2012
Licenced CPOL

Attach JavaScript with Auto-Generated Buttons of the GridView Control

, 7 Feb 2013
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>>
</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.

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:



You may also be interested in...

Pro

Comments and Discussions

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