ASP.NET Gridview - How do I make all rows but the header row have a hover effect?

Question

I'm trying to make all rows have a hover background except the header row.

Any tips?

I've got BoundFields, a TemplateField, and a CommandField.

Thanks

Answer 1

This is how it can be done

<asp:GridView... OnRowCreated="GvListingReport_RowCreated" />

And in the code

        public void GvListingReport_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#DDDDDD';this.style.cursor='hand'");

            ListingRecord record = e.Row.DataItem as ListingRecord;
            if (record != null)
            {
                e.Row.Attributes.Add("onclick", "javascript:MM_openBrWindow('" + url + "','dec','scrollbars=yes,resizable=yes')");
            }

            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF';");
        }
    }

You can also make the hover effect maintain the colour for alternating rows.

Answer 2

This can be implemented on client side using jQuery

 <script type="text/javascript" src="path/to/jquery"></script>
 <script type="text/javascript">
      $(document).ready(function(){
          $("#<%= grid.ClientID%> tr").not("tr:first-child").hover(
             function(){$(this).addClass("OnMouseOverClass");},//mouse-over
             function(){$(this).removeClass("OnMouseOutClass");});//mouse-out
      });
 </script>