CODEWITHSUNDEEP
c#asp.netgridview
Shibly
Shibly

Reputation: 53

How to create a gridview row clickable?

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.

Upvotes: 4

Views: 18431

Answers (3)

user1544428
user1544428

Reputation: 150

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.

Upvotes: 0

Shirish
Shirish

Reputation: 1250

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);
    }
}

Upvotes: 4

Sheenu Mehra
Sheenu Mehra

Reputation: 178

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

Upvotes: 7

Related Questions