Thursday, February 16, 2012

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.

6 comments:

  1. very nice blog..it really helps me

    ReplyDelete
  2. These are really enormous ideas in on the topic of blogging.
    You have touched some nice things here. Any way keep up wrinting.


    Here is my website ... http://tux.ugr.es/~planpais/mediawiki/index.php?title=Usuario:MonteTam

    ReplyDelete
  3. At this moment I am going away to do my breakfast,
    after having my breakfast coming yet again to read other news.


    Feel free to surf to my webpage - How Can I lose weight

    ReplyDelete
  4. It's in point of fact a nice and helpful piece of information. I am happy that you just shared this useful info with us. Please stay us up to date like this. Thanks for sharing.

    My web blog - how much should i weigh chart

    ReplyDelete
  5. Wow, awesome blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look of your site is fantastic, as
    well as the content!

    Also visit my web blog - Natural Cleanse REviews

    ReplyDelete
  6. Hi there just wanted to give you a brief heads up and let you know
    a few of the images aren't loading properly. I'm not sure why but I think its
    a linking issue. I've tried it in two different web browsers and both show the same outcome.

    Also visit my web page; Diet Plan

    ReplyDelete