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?

why you can try in javascript – senthilkumar2185 Nov 18 '13 at 06:43 — senthilkumar2185, Nov 18 '13 at 06:43
Can you help me doing it please. – Shanna Nov 18 '13 at 06:44 — Shanna, Nov 18 '13 at 06:44

Alice · Accepted Answer · 2013-11-18T09:38:33.237

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.

amitesh · Answer 2 · 2013-11-18T08:51:31.207

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);
    }

but first change your row color then your cell color otherwise it will show only your row color — amitesh, Nov 18 '13 at 08:52

score 3 · Answer 3 · answered Nov 18 '13 at 07:08

3

 <script type="text/javascript" language="javascript">
  function SetHeight(txtdesc) {
            txtdesc.style.backgroundColor = 'blue';
        }
        function out(txtdesc) {
            txtdesc.style.backgroundColor = 'green';
        }
</script>

 <ItemTemplate>
<asp:TextBox ID="txtdiscpoint" ForeColor="Black" Font-Names="Verdana" Font-Size="1.10em" 
 TextMode="MultiLine" runat="server" onmouseover="SetHeight(this)" onmouseout="out(this)" > </asp:TextBox>
</ItemTemplate>

answered Nov 18 '13 at 07:08

senthilkumar2185

2,536
3
22
36

Thanks. This works only if i move over the paricular cell. If I move mouse over the row, color of cell does not change – Shanna Nov 18 '13 at 07:20
mouseout you change color – senthilkumar2185 Nov 18 '13 at 08:17

score 1 · Answer 4 · answered Nov 18 '13 at 06:32

1

try this

e.Row.Attributes.Add("onmouseover","this.originalcolor=this.style.backgroundColor;" + " this.style.backgroundColor='#FDCB0A';");

answered Nov 18 '13 at 06:32

MusicLovingIndianGirl

5,909
9
34
65

Thanks for replying. The row color changes. But I want to change the colour of particular cell on mouseover. – Shanna Nov 18 '13 at 06:39
Try removing the background color of particular cell on mouse hover and then add the needed background color on mouse out. – MusicLovingIndianGirl Nov 18 '13 at 06:45
Thats what. I do not know to remove or add colour to particular "CELL" on mouseover on "ROW". – Shanna Nov 18 '13 at 06:52
Check if you find this useful http://www.aspsnippets.com/Articles/How-to-change-GridView-Row-Color-on-Mouseover-in-ASPNet.aspx – MusicLovingIndianGirl Nov 18 '13 at 06:59
That changes only row color not cell color – Shanna Nov 18 '13 at 07:02

score 1 · Answer 5 · answered Nov 18 '13 at 10:09

Try this:

 <style type="text/css">

        #GridView1 tr.rowHover:hover

        {

            background-color: Yellow;

            font-family: Arial;

        }

    </style>

    <asp:GridView ID="GridView1" runat="server" EnableViewState="false" RowStyle-CssClass="rowHover" ClientIDMode="Static" />

Link:

http://www.dotnetfunda.com/articles/show/1374/how-to-display-mouseover-effect-in-gridview-rows-using-only-css

How to change GridView cell color on row MouseOver

5 Answers5