How to change GridView cell color on row MouseOver

Shanna picture Shanna · Nov 18, 2013 · Viewed 17.8k times · Source

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

amitesh picture amitesh · Nov 18, 2013

Use this it will change your cell color

if (e.Row.RowType = DataControlRowType.DataRow)
{
    string onmouseoverStyle = "this.style.backgroundColor='blue'";
    string onmouseoutStyle = "this.style.backgroundColor='white'";
    e.Row.Cells[1].Attributes.Add("onmouseover",onmouseoverStyle);
    e.Row.Cells[1].Attributes.Add("onmouseout",onmouseoutStyle);
}

you can modify it according to ur self for row also

you can also use this code

if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string onmouseoverStyle = "this.style.backgroundColor='blue'";
        string onmouseoutStyle = "this.style.backgroundColor='white'";
        string onmouseoverStyle1 = "this.style.backgroundColor='green'";
        string onmouseoutStyle1 = "this.style.backgroundColor='white'";
        e.Row.Attributes.Add("onmouseover", onmouseoverStyle1);
        e.Row.Attributes.Add("onmouseout", onmouseoutStyle1);
        e.Row.Cells[1].Attributes.Add("onmouseover", onmouseoverStyle);
        e.Row.Cells[1].Attributes.Add("onmouseout", onmouseoutStyle);
    }