CODEWITHSUNDEEP
c#asp.netcssgridviewonmouseover
Shanna
Shanna

Reputation: 783

How to change GridView cell color on row MouseOver

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?

Upvotes: 4

Views: 20076

Answers (5)

Monika
Monika

Reputation: 2210

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

Upvotes: 1

Alice
Alice

Reputation: 1265

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.

Upvotes: 6

amitesh
amitesh

Reputation: 860

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

Upvotes: 5

senthilkumar2185
senthilkumar2185

Reputation: 2568

 <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>

Upvotes: 3

MusicLovingIndianGirl
MusicLovingIndianGirl

Reputation: 5947

try this

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

Upvotes: 1

Related Questions