Geeks With Blogs
AzamSharp Some day I will know everything. I hope that day never comes.
Pretty simple idea to change the row color of the GridView control on the onmouseover event.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Silver'");
            // This will be the back ground color of the GridView Control
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='White'");
        }
    }

Posted on Monday, November 7, 2005 9:57 PM | Back to top


Comments on this post: Changing the Row Color on the mouseover event in GridView Control

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
how to sae the back ground color to resotor it in case of alternating colors
Left by Moody on Nov 22, 2005 12:46 PM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
sorry some thing bad in my keyboard my question is that i want to keep my back ground color in case of alternating style because this way erase my bck color
Left by Moody on Nov 22, 2005 12:48 PM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
You can do the same thing with a css class and some javascript. It's pretty clean this way:

protected void Grid_RowDataBound(Object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType != DataControlRowType.DataRow) return;

//set row hover
GridView gv = (GridView)sender;
string className = (e.Row.RowState == DataControlRowState.Alternate) ? gv.AlternatingRowStyle.CssClass : gv.RowStyle.CssClass;
e.Row.Attributes.Add("onmouseover", "this.className='gridHover';");
e.Row.Attributes.Add("onmouseout", "this.className='" + className + "';");
}
Left by Dirk Watkins on Apr 27, 2006 7:58 AM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
Thanks yes your way is much cleaner. I will give it a try. I did a post on the changing color and remembering the alternate colors although its not that clean :)

http://geekswithblogs.net/azamsharp/archive/2006/04/11/74893.aspx



Left by AzamSharp on Apr 27, 2006 8:01 AM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
Thanks, great information.
Left by Wesley on Feb 23, 2007 2:50 AM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
This is the code in VB with diferent rows colors depending cells status number:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Chocolate'; this.style.color='White'; this.style.cursor='pointer';")
Select Case DataBinder.Eval(e.Row.DataItem, "estatus")
Case "1"
e.Row.Cells(6).Text = "First Color"
e.Row.BackColor = Drawing.Color.FromName("#ffff99")
e.Row.ForeColor = Drawing.Color.Black
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#ffff99'; this.style.color='#333333';")
Case "2"
e.Row.Cells(6).Text = "Second Color"
e.Row.BackColor = Drawing.Color.FromName("#f4de41")
e.Row.ForeColor = Drawing.Color.Black
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#f4de41'; this.style.color='Black';")
Case "3"
e.Row.Cells(6).Text = "Third Color"
e.Row.BackColor = Drawing.Color.Gold
e.Row.ForeColor = Drawing.Color.Black
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='Gold'; this.style.color='Black';")
Case "4"
e.Row.Cells(6).Text = "Fourth Color"
e.Row.BackColor = Drawing.Color.FromName("#f8b84d")
e.Row.ForeColor = Drawing.Color.Black
End Select
End If
End Sub
Left by Anastacio Ham on Apr 22, 2007 8:31 PM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
yo use esto en un data grid viewer 2005
Me.dgvHorario.Rows(1).Cells.Item(1).Style.ForeColor = Color.Blue
Me.dgvHorario.Rows(1).Cells(1).Style.BackColor = Color.Green
Me.dgvHorario.Rows(1).Cells(1).Value = "Green"

espero les sirva
Left by jin on Jul 21, 2007 9:46 AM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
I want to set font decoration to underline. How to do that ?
onMouseOver="this.style.font='text-decoration:underline';"

but not works.

Thanks
Left by Kusno on Nov 08, 2007 5:00 PM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
Nice Approach
Left by Sandy on Nov 22, 2007 5:41 PM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
Nice approach and thank you for the tips
Left by Jk on Dec 10, 2007 5:07 PM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
Nice one left by Dirk Watkins! Very clean, thank you!
Left by Diane on Jan 23, 2008 6:58 AM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
This is also another way of doing mouse over by just using the backcolor

if (e.Row.RowType == DataControlRowType.DataRow)
{
GridView gv = (GridView)sender;
System.Drawing.Color color = (e.Row.RowState == DataControlRowState.Alternate) ? gv.AlternatingRowStyle.BackColor : gv.RowStyle.BackColor;
string hexColor = System.Drawing.ColorTranslator.ToHtml(color);

e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#FDE895'");
e.Row.Attributes.Add("onmouseout", string.Format("this.style.backgroundColor='{0}'", hexColor));

}
Left by dinox8@yahoo.com on Feb 19, 2008 9:40 PM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
hey cool stuff.thanks
Left by naiezgi on Apr 04, 2008 9:26 AM

# re: Changing the Row Color on the mouseover event in GridView Control
Requesting Gravatar...
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("class", "BGRow");
}
}

... and, on the stylesheet...

.BGRow
{
background-image:none;
}
.BGRow:hover
{
background-image:url(../../Images/bgrow.gif);
}

Left by Charly on May 08, 2008 7:32 AM

Your comment:
 (will show your gravatar)


Copyright © Mohammad Azam | Powered by: GeeksWithBlogs.net