Click here to Skip to main content
14,870,759 members
Articles / Web Development / ASP.NET / ASP.NET4.0
Tip/Trick
Posted 18 Jul 2013

Stats

103.4K views
9 bookmarked

Fire GridView SelectedIndexChanged Event without Select Button

18 Jul 2013CPOL2 min read
Want to select the GridViewRow without Select button showing on the row. Just follow the steps mentioned in the tip.

Introduction

The Select Button is used to Select a Row of GridView, if we set AutoGenerateSelectButton Property[^] to True so that SelectedIndexChanged Event[^] gets fired.

But it doesn't always solve the purpose. Because the SelectedIndexChanged Event[^] will only fire if you click on the Select Button of a particular Row. It fails to work, if you click on any other area of the same Row.

Let's explore how to resolve this.

Background 

Many questions regarding the same in online forums drove me towards a research. After spending some time, finally I came up with a solution, which I am going to explain.

Using the Code

Let's go step by step.

  1. Add AutoGenerateSelectButton Property[^] to GridView and assign its value to True. So, Select Button is now automatically added to each Row at the first Cell position.
  2. Add OnSelectedIndexChanged[^] and OnRowDataBound[^] Methods to GridView. So, the GridView Markup will look like below.
  3. HTML
    <asp:GridView ID="grdYourGrid" 
         runat="server" 
         AutoGenerateSelectButton="True"
         OnRowDataBound="grdYourGrid_RowDataBound" 
         OnSelectedIndexChanged="grdYourGrid_SelectedIndexChanged">
    </asp:GridView>

    You can specify other properties as per your requirements. I am explaining the needed ones.

  4. Add the below Code in RowDataBound Event[^].
  5. C#
    protected void grdYourGrid_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            // Hiding the Select Button Cell in Header Row.
            e.Row.Cells[0].Style.Add(HtmlTextWriterStyle.Display, "none");
        }
    
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            // Hiding the Select Button Cells showing for each Data Row. 
            e.Row.Cells[0].Style.Add(HtmlTextWriterStyle.Display, "none");
    
            // Attaching one onclick event for the entire row, so that it will
            // fire SelectedIndexChanged, while we click anywhere on the row.
            e.Row.Attributes["onclick"] = 
              ClientScript.GetPostBackClientHyperlink(this.grdYourGrid, "Select$" + e.Row.RowIndex);
        }
    }

    Here the last line of code is responsible for adding a onclick attribute to the GridViewRow.

    For example:- The following html is generated for the first GridViewRow. See how a onclick attribute is added to the Row. 

    HTML
    <tr style="border-color: Black; border-width: 1px; border-style: Solid;" 
                   onclick="javascript:__doPostBack('grdYourGrid','Select$0')">
        <td style="display: none;">
            <a href="javascript:__doPostBack('grdYourGrid','Select$0')">Select</a>
        </td>
        <td>
            <!--Cell 2-->
        </td>
        <td>
            <!--Cell 3-->
        </td>
    </tr>

    As per ClientScriptManager.GetPostBackClientHyperlink Method[^], it just appends a javascript and Posts Back to Server with the help of __doPostBack method and its related arguments.

    Note: Here, the most important thing to mark is that, the first Cell of the Row contains a Hyperlink, which is actually the Select Button Autogenerated. But it's display is now hidden by the code. 

  6. Now add the SelectedIndexChanged Event[^] on Code Behind. 
  7. C#
    protected void grdYourGrid_SelectedIndexChanged(object sender, EventArgs e)
    {
        // Hurray!!! The row is selected.
        // Now do whatever you wanted to do.
    }
  8. Last, but not the least. Click anywhere on the GridViewRow.
  9. You can see that SelectedIndexChanged Event[^] is fired at Code Behind. 

What you feel?

If you find this Tip as helpful, then please Vote it up and add some Comments. It really means a lot. That will also help to fine tune my technical skills. Thanks for reading. Hope you enjoyed the Tip. 

Points of Interest

The Selection of GridViewRow actually does not work without the Select Button. So, we just hided that and provided the clicking power to the entire row. Don't you think it is cunning workaround?

History

  • 18 July 2013 - First version submitted.

License

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

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer (Senior)
India India
Proud Indian | Author | TEDx Speaker | Microsoft MVP | CodeProject MVP | Speaker | DZone Most Valuable Blogger| jsfiddler

My Website & Blog

taditdash.co.in

Programming Community Profiles

jsfiddle | Stack Overflow

Social Profiles

Facebook | Twitter | LinkedIn

Awards


  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016, 2017, 2018
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013

Comments and Discussions

 
SuggestionVery good, this is almost perfect. Pin
Frank Kerrigan22-Jun-15 22:25
MemberFrank Kerrigan22-Jun-15 22:25 
GeneralRe: Very good, this is almost perfect. Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)25-Jun-15 21:04
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)25-Jun-15 21:04 
GeneralMy vote of 4 Pin
David Pitcher22-Dec-14 8:49
MemberDavid Pitcher22-Dec-14 8:49 
GeneralRe: My vote of 4 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)22-Dec-14 18:58
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)22-Dec-14 18:58 
GeneralMy vote of 5 Pin
Sibeesh KV13-Nov-14 3:41
professionalSibeesh KV13-Nov-14 3:41 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Nov-14 3:42
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Nov-14 3:42 
GeneralRe: My vote of 5 Pin
Sibeesh KV13-Nov-14 3:45
professionalSibeesh KV13-Nov-14 3:45 
GeneralGood One Tadit Pin
karthik Udhayakumar19-May-14 12:43
professionalkarthik Udhayakumar19-May-14 12:43 
GeneralRe: Good One Tadit Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)19-May-14 20:09
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)19-May-14 20:09 
GeneralMy vote of 5 Pin
Debopam Pal18-Nov-13 15:47
professionalDebopam Pal18-Nov-13 15:47 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)18-Nov-13 18:54
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)18-Nov-13 18:54 
GeneralNice Pin
Debopam Pal18-Nov-13 15:46
professionalDebopam Pal18-Nov-13 15:46 
GeneralRe: Nice Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)18-Nov-13 18:54
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)18-Nov-13 18:54 
GeneralMy vote of 5 Pin
Amirsalgar130-Jul-13 1:39
MemberAmirsalgar130-Jul-13 1:39 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)30-Jul-13 1:41
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)30-Jul-13 1:41 
QuestionQuery to be cleared. Pin
Sisir Patro18-Jul-13 2:23
professionalSisir Patro18-Jul-13 2:23 
AnswerRe: Query to be cleared. Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)18-Jul-13 4:23
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)18-Jul-13 4:23 
GeneralRe: Query to be cleared. Pin
Sisir Patro18-Jul-13 4:48
professionalSisir Patro18-Jul-13 4:48 
AnswerRe: Query to be cleared. Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)18-Jul-13 5:13
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)18-Jul-13 5:13 
GeneralRe: Query to be cleared. Pin
Sisir Patro19-Jul-13 5:30
professionalSisir Patro19-Jul-13 5:30 
AnswerRe: Query to be cleared. Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)19-Jul-13 8:34
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)19-Jul-13 8:34 
GeneralRe: Query to be cleared. Pin
Sisir Patro21-Jul-13 22:53
professionalSisir Patro21-Jul-13 22:53 
AnswerRe: Query to be cleared. Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)29-Jul-13 20:55
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)29-Jul-13 20:55 
AnswerRe: Query to be cleared. Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)18-Jul-13 8:31
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)18-Jul-13 8:31 
GeneralRe: Query to be cleared. Pin
Sisir Patro19-Jul-13 5:35
professionalSisir Patro19-Jul-13 5:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.