Fun Infused Games  |   Smooth Operator RSS 

  Home   |    Archive   |    Subscribe   |    Search   |    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#    (0)

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

No comments for this article.


Add Comments

Name *
Website
  Name the animal in the picture below:

*  
Comment *
Insert Cancel


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