Gridview asp.net mouse over TR finds which row was clicked on server side

Question

I am new to all javascript work. I have a gridview that I want the user to be able to hover over the entire row (believe all of this is TR) and be able to click anywhere and you can select that row. I need server side code to find out which line was clicked.

I don’t know where to start, and I would like to be guided by:

1) The best way to add the ability to show that the user is hanging over a line (changing the background color or something like that)

2) How to enable the ability to click anywhere on this line and the code on the Firewall server side to find out which line was clicked.

I read this article http://www.dotnetcurry.com/ShowArticle.aspx?ID=109 when I run the code on the server side from the client side, but I don’t know how to determine which line it would come from.

thanks

John Hawkins

Answer 1

That should do the trick, just make a grid selection

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

A click will be detected on the server using the GridView click event.

Answer 2

I always work with a repeater, for the hover effect on the repeater I use jQuery

This happens between 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 don't do anything on the server side when you click a line, you can use jQuery again for the selected effect.