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
