How to create a gridview row clickable?

Question

I want to create a gridview row where the whole row is clickable and when I click anywhere on the row it open another aspx page with the rows information.

I am using asp.net and C#. Can anyone help me please. Thanks in advance.

Take a look: http://www.codeproject.com/Articles/15677/Clickable-and-Double-Clickable-Rows-with-GridView — Leo Chapiro, Jul 30 '15 at 09:57
Welcome to StackOverflow, you need to post your code what you tried and where you stuck. So others can give proper answer — Satinder singh, Jul 30 '15 at 12:20

score 7 · Answer 1 · edited Jul 30 '15 at 10:31

fire two events of Gridview

OnRowDataBound and OnSelectedIndexChanged

Then write code in these events

protected void OnRowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + e.Row.RowIndex);
        e.Row.ToolTip = "Click to select this row.";
    }
}

protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
    foreach (GridViewRow row in GridView1.Rows)
    {
        if (row.RowIndex == GridView1.SelectedIndex)
        {
            row.BackColor = ColorTranslator.FromHtml("#A1DCF2");
            row.ToolTip = string.Empty;
        }
        else
        {
            row.BackColor = ColorTranslator.FromHtml("#FFFFFF");
            row.ToolTip = "Click to select this row.";
        } 
    }
}

also set property EnableEventValidation = "false" in

If I use this way, how to make a button inside each row to fire it's own click event and not trigger the row selected event? — Trancol, Oct 02 '19 at 03:13

Shirish · Accepted Answer · 2015-07-31T10:26:54.773

4

Just call below code on RowDataBound to click anywhere on Gridview row to fire SelectedIndexChanged event

You have to do <%@ Page EnableEventValidation="False" %>

protected void grdYourGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{   
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // 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);
    }
}

edited Jul 31 '15 at 10:26

answered Jul 30 '15 at 10:38

Shirish

1,252
11
20

When your code debug it show an exception "InvalidCastException was unhandled by user code". – Shibly Jul 30 '15 at 10:52
You should in most cases avoid turning off event validation. See this post for more details http://stackoverflow.com/questions/1503630/purpose-for-pages-enableeventvalidation-false – woodbase Dec 21 '16 at 06:52

score 0 · Answer 3 · answered Feb 07 '21 at 00:52

I'm going to add some options for doing this question a different way. If the entire row is going to be clickable, you can get away with using a repeater instead of a GridView. However, this answer will also work with a GridView. In either the repeater template or a GridView TempletedField, put a plain ol' div in it.

Search stackoverflow on how to make a whole div clickable. There are several ways to do it. There are some CSS only ways and some that involve a little javascript/jquery.

It will look something like this:

 <asp:TemplateField HeaderText="From">
                          <ItemTemplate><div class="container"> <a class="add_to_cart" onclick="DoTest('<%# DataBinder.Eval(Container.DataItem, "Guid") %>');" title="Add to Cart!"><asp:Label ID="Label1" runat="server" Text='<%# Bind("Created_by") %>'></asp:Label></a>                                 
                              </div>
                         </ItemTemplate>

Make sure your div fills the whole cell or row height and width wise. Once it is clickable, it just works.

The onclick="DoTest in the above example was just a way to pass a guid to the codebehind. However, if you don't need to do that, then a plain old anchor tag will work.

You won't need a OnRowDataBound event. You won't need to turn off EventValidation. You won't even need javascript, depending on what exactly you are trying to do.

If you do this right, anywhere on the row will be a clickable link.

I will add, if you do multiple columns, you need to put the div in each column template. You could also do one templated field and put an html table in it, just like you can in a repeater.

Regardless, either way will work. I ended up putting the div in each column template so my GridView headers would be there.

How to create a gridview row clickable?

3 Answers3

Linked