Making entire row in Gridview clickable

Question

I've been trying to follow this answer: How to implement full row selecting in GridView without select button?

But I'm still slightly confused. After following that question, my rows are now clickable. But how do I implement it to do something after being clicked? Currently, I use a button to do what I need to the database per row:

Here is the .aspx code:

<Columns>
<asp:ButtonField Text = "Click Me" CommandName = "Clicked" ButtonType = "Button" />
...other columns stuff
</Columns>

C# code behind:

  protected void RowCommand(object sender, GridViewCommandEventArgs e)
    {
        //if button is clicked
        if (e.CommandName == "Clicked")
        {
            //go find the index on the gridview
            int selectedIndex = MsgInbox.SelectedIndex;
            if (int.TryParse(e.CommandArgument.ToString(), out selectedIndex))
            {
                //do something with database
            }

Now that works beautifully. However, I don't want a button to be clickable, I want a entire row to be clickable. I know this is currently wrong, but this is what I have so far for the code:

.aspx code

   <Columns>
    <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="SelectRow" runat="server" ForeColor="red" CommandName="Clicked"></asp:LinkButton>
                </ItemTemplate>
    </asp:TemplateField>

C# code:

    protected void Gridview_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='underline';";
            e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";
            var selectButton = e.Row.FindControl("SelectRow") as Button;
            e.Row.Attributes["onclick"] = ClientScript.GetPostBackEventReference(selectButton, "");

I get a simple null pointer exception when I do this, but I'm not really familiar with e.Row.Attributes so I really have no idea where this is failing and what I need to do to add the database logic.

Thanks

Which line specifically is throwing an exception? What kind of exception? Note that you should use `as LinkButton` instead of `as Button`, since `SelectRow` is a `LinkButton`. — Michael Liu, Jan 09 '13 at 04:29
oh sweet! No error anymore now that I made it a LinkButton. Do you know where I should enter the logic for the database code (for example, click this row and do this to the database)? Right now when I click it nothing happens because I'm not sure where/how to add the code. Thanks! — Kevin, Jan 10 '13 at 02:35

score 2 · Answer 1 · answered Jan 09 '13 at 05:05

It would be a lot simpler if you are ready to use jquery. For example,

<asp:GridView rowStyle-CssClass="row" ...
...
<asp:TemplateField>
  <ItemTemplate>
    <asp:LinkButton ID="SelectRow" runat="server" CommandName="Clicked" CssClass="selButton" />   
  </ItemTemplate>
</asp:TemplateField>

Note that each data row will have css class row and select button will have selButton

CSS would be some-thing like

tr.row { }   /* normal row styling */
tr.row-highlight { background-color: blue; }   /* highlighted row styling */
tr.row .selButton { display:none; visibility:hidden; }   /* select button styling, I am using hidden button */

Finally the java-script

$(document).ready(function() {
   $('tr.row').click(
      function() {
        // simulate click of select button
        $(this).find('.selButton').click();
      }).hover(
      // add/remove css class to highlight on mouse over/out
      function() { $(this).addClass('row-highlight'); },
      function() { $(this).removeClass('row-highlight'); });
});

score 2 · Answer 2 · answered Jan 10 '13 at 21:21

So I figured it out, and I'm sure there are better ways to implement it via jquery or javascript but I am not too good at either yet.

For my .aspx file, for the gridview, I simply added:

AutoGenerateSelectButton ="true"

In my C#, under MsgInbox_SelectedIndexChanged, I put all my RowCommand logic.

Finally, in C#, under my Gridview_RowCreated, I added this line to hide the Select link:

e.Row.Cells[0].Style["display"] = "none";

Making entire row in Gridview clickable

2 Answers2