Fire GridView SelectedIndexChanged Event without Select Button

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.

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

3. Add the below Code in RowDataBound Event[^].

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. 

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

4. Now add the SelectedIndexChanged Event[^] on Code Behind. 

protected void grdYourGrid_SelectedIndexChanged(object sender, EventArgs e)
{
    // Hurray!!! The row is selected.
    // Now do whatever you wanted to do.
}

5. Last, but not the least. Click anywhere on the GridViewRow.

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.