How to change GridView cell color on row MouseOver

Question

I have a GridView and I want to change the cell color when I MouseOver the row. I tried the following:

e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#c8e4b6'");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='white'");
e.Row.Cells[1].Attributes.Add("onmouseover", "this.style.backgroundColor='green'");
e.Row.Cells[1].Attributes.Add("onmouseout", "this.style.backgroundColor='white'");

The row color changes perfectly. But the cell color changes only when the mouse is moved on that cell.

Is there a way to change the cell color when the mouse is on the row instead?

Answer 1

I think you have to set style of Cells[1] in mouse over event handler.

You shouldn't set onmouseover and onmouseout attribute of the cell, because this will work just when you do mouse over on it, not on the whole row.

The code below will describe more:

I have GridView names GridView1, and I have Javascript functions to handle mouse over and mouse out event as the following

<script type="text/javascript" >
    function onMouseOver(rowIndex) {
        var gv = document.getElementById("GridView1");
        var rowElement = gv.rows[rowIndex];
        rowElement.style.backgroundColor = "#c8e4b6";
        rowElement.cells[1].style.backgroundColor = "green";
    }

    function onMouseOut(rowIndex) {
        var gv = document.getElementById("GridView1");
        var rowElement = gv.rows[rowIndex];
        rowElement.style.backgroundColor = "#fff";
        rowElement.cells[1].style.backgroundColor = "#fff";
    }
</script>

In RowDataBound event handler, try to add attributes onmouseover and onmouseout to all rows, handled by Javascript functions, onMouseOver and onMouseOut

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
       e.Row.Attributes["onmouseover"] = "onMouseOver('" + (e.Row.RowIndex + 1) + "')";
       e.Row.Attributes["onmouseout"] = "onMouseOut('" + (e.Row.RowIndex + 1) + "')";
    }
}

The GridView tag should be like this:

<asp:GridView ID="GridView1" runat="server" ...  OnRowDataBound="GridView1_RowDataBound">

I hope this will help.