GridView doesn't have any built-in functionality to change color row on mouse-over, for this functionality we need to explicitly write code. This can be done easily using client side code after binding client side functionality to mouse-over and mouse-out events.
Here I am explaining - How to change GridView row color on mouse-over?
For this we require mouse-over and mouse-out functionality in client side. I have written following client side functions for this-
Client side functions-
<head runat="server">
<script type="text/javascript">
//Function to change color of grid row on mouseover
function mouseIn(row) {
row.style.backgroundColor = '#D3DFF8';
}
//Function to change color of grid row on mouseout
function mouseOut(row) {
row.style.backgroundColor = '#FFFFFF';
}
</script>
</head>
In above code, I have defined 2 client side functions.
1. mouseIn ()
2. mouseOut ()
mouseIn() - This function is taking one parameter, using this parameter I am passing row object,
In this function, I am setting style for row object, here I am setting row color value as- #D3DFF8 .
mouseOut() - This function is also taking one parameter, but in this function, I am setting row color value as- #FFFFFF.
Now to make it work, I have bounded these client side functions to GridView row using RowDataBound() event.
Here is server side code-
protected void GridEmpData_RowDataBound(object sender, GridViewRowEventArgs e)
{
try
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//Binding client side functions to GridView row
e.Row.Attributes.Add("onmouseover", "mouseIn(this);");
e.Row.Attributes.Add("onmouseout", "mouseOut(this);");
}
}
catch (Exception ex)
{
throw;
}
}
Now in server side code, I am binding client side functions- mounseIn and mouseOut to GridView's
Row. For this I have used RowDataBound() event of GridView. Here "this" is object which is referring to row of GridView.
Thanks
Pretty neat - thank you!
ReplyDeleteYou always welcome.
DeleteThis is also done simply using CSS.
ReplyDeleteAdd the CSS in head part
#MainContent_gvDevice tr:Hover
{
background-color:#F6F6F6;
}
here instead of gvDevice put your gridview id.
Yes, you can implement this code using both way, client side and server side also.
DeleteThe code which you have given that will not revert back the previous color. If you want to complete this task using CSS then check for Andre reply.
How can i set the row color, back to the original when i mouseOver? I'm using AlternatingRowStyle, so, leave everything white would not be appropried.
ReplyDeleteSorry, i dunno nothing about javascript. Can someone help me plz?
PS: I'm developing to IE8 =/.
I discover the answer for my question rs. Find here:
ReplyDeletehttp://stackoverflow.com/questions/5006684/hovering-over-gridview-row-overrides-alternating-row-style
And adapt to look like this:
function mouseIn(row) {
row.setAttribute('bgColor', row.style.backgroundColor); row.style.backgroundColor = '#FFFFCC';
}
//Function to change color of grid row on mouseout
function mouseOut(row) {
row.style.backgroundColor = row.getAttribute('bgColor');
}
thx for the post Jitendra.
Yes you can implement this code using both way, client side and server side also.
DeleteHi,nice code for How to change GridView row color on mouseover in asp.net c#.In this code, there are two client side functions ie,mouse in and mouse out and also a server side functions.Thanks for your help..
ReplyDelete-Aparna
Theosoft
Thanks for appreciation.
DeleteAlternative GridView row color in C#.NET
ReplyDeleteplease find below link for solution.
ReplyDeleteIts really easy and simple
http://www.getmscode.com/2014/03/changing-row-color-of-grid-on-mouse-over.html