CODEWITHSUNDEEP
asp.netcssgridview
Brian Webster
Brian Webster

Reputation: 30855

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

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.

Upvotes: 0

Views: 1602

Answers (3)

TheVillageIdiot
TheVillageIdiot

Reputation: 40507

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>

Upvotes: 2

CRice
CRice

Reputation: 12567

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.

Upvotes: 1

this. __curious_geek
this. __curious_geek

Reputation: 43207

Here's the solution with example.

Link Txt: http://www.codeproject.com/KB/webforms/MouseHoverUsingCSS.aspx

Check out the screenshot as well.

alt text

Upvotes: 2

Related Questions