Fun Infused Games  |   Smooth Operator

  Home   |    Archive   |    About
Posts prior to 8/2/2010 may be missing data. If you need one of those posts, please contact kriswd40@yahoo.com and I will try and recover/find it.

GridView Row Color Change On MouseOver
Date 8/7/2008    Tags ASP.net, C#    (1)

A need little feature that can jazz up any Gridview is adding a color-change when the mouse is over a row. Thanks to our good friend (or nemesis depending on your point of view) JavaScript, setting up such a thing is only a few lines of code away.

First, setup your Gridview. I’m sure you’ve done this thousands of times, so I won’t bore you with the code of setting up or populating this guy. Add an OnRowCreated event to your GridView. This will run for each row created in your Gridview and allow you to add the necessary JavaScript.
<asp:GridView ID="gvNews" 
        runat="server" 
        AutoGenerateColumns="False" 
        DataKeyNames="BlogID"
        DataSourceID="SqlDataSource1" 
        AllowPaging="True" 
        PageSize="20"
        BorderStyle="None" 
        BorderWidth="0px" 
        Width="100%" 
        CellPadding="10"
        CellSpacing="4"
        ShowHeader="False"
        OnRowCreated="gvNews_OnRowCreated"
        >
</asp:GridView>
In your code behind, you will need to add a handler for this event. For my example, I’m using alternating background colors on rows (which you should do too, it makes things so much more readable). This causes me to add a couple extra lines so that I make sure I’m setting my rows back to the correct color on MouseOut.
    protected void gvNews_OnRowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            if (e.Row.RowState == DataControlRowState.Alternate)
            {
                e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#FFFFE1';");
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#f7fff8';");
            }
            else
            {
                e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#FFFFE1';");
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#eefef0';");
            }
        }
    }
That’s all there is to it. If you want to see this in action, check out the news section on the main page here.

There is room for improvement here… you could assign a CSS class instead of hard coding the colors. I believe there is also a way you could also get the background color that is assigned in the RowStyle/AlternatingRowStyle section. That would make this much more portable.

kick it on DotNetKicks.com



This article has been view 21364 times.


Comments

Raul

Avatar

5/22/2015 10:23:01 AM

Excellent, thank you, It really helps a lot


Add Comments

Name *
Website
  Name the animal in the picture below:

*
Comment *
Insert Cancel
Things To Click


Tags
Video Games (7)  Trivia or Die (3)  SQL (1)  iOS (3)  Game Dev (11)  Advise (14)  PC (1)  World of Chalk (2)  FIN (20)  Abduction Action! (27)  XBLIG (32)  Abduction Action (1)  Nastier (4)  ASP.net (18)  Absurd (2)  Volchaos (11)  Web (19)  Fin (1)  XNA (40)  Rant (50)  Cool (2)  Visual Studio (1)  Trivia Or Die (1)  Xbox (1)  C# (14)  Sports (11)  Design (2)  Development (13)  Hypership (28)  WP7 (8)  VolChaos (1)  Nasty (34)  Abdction Action! (1)