gridview asp.net mouse over TR find which row was clicked on server side code

Question

Hi all,

I am pretty new to the whole javascript thing. I have a gridview that I want the user to be able to hover over the whole row (believe its the whole TR) and be able to click anywhere and that would be able to select that row. I need teh server side code to be able to know which row was clicked.

I don't really know where to start with this and would love some guidance on:

1) Best way to add the ability to show that the user is hovering over a row (changing background colour or something)

2) How to hook up the ability to click anywhere on that row and fire server side code to know which row was clicked.

Was reading this article http://www.dotnetcurry.com/ShowArticle.aspx?ID=109 on firing server side code from client side but don't know how to figure out what row it would have come from.

Thank you

Jon Hawkins

Answer 1

This should do the trick, just make the gridview selectable

protected void Gridview1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes["onmouseover"] = "this.style.background = '#CCCCCC';";
            e.Row.Attributes["onmouseout"] = "this.style.background = '#FFFFFF';";

            e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.Gridview1, "Select$" + e.Row.RowIndex);
        }
    }

The click will be detected server-side by the GridView click event.

Answer 2

I always work with repeater control, for hover effect on repeater i use jQuery

This goes between the tags

                $(document).ready(function() {
                    $(".tr-base").mouseover(function() {
                        $(this).toggleClass("trHover");
                    }).mouseout(function() {
                        $(this).removeClass("trHover");
                    });
                });

and this is the css class.

.trHover{background-color: #D5E5ED;}

If you wont do anything in server side when the row is clicked you can use jQuery again for the selected effect.