Gridview row color change on MouseOver

Question

0.00/5 (No votes)

See more:

Hello Frnds,

our project is based upon ASP.NET, Gridview, C#, SqlServer 2005.

I need to change the color of row on Mouseover.

already am using background color for 2 columns in my gridview.

and i wrote code in row databound event....this is my code.

C#

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {

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

        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalcolor;");
 
    }
}

This is working fine, BUT when i mouseover, this mouseover color is not showing on that two columns in gridview(which i have gave another background color to them)

So my requirement is when i mouseover on row.., that particular row INCLUDING that two columns(which i have gave Background color) must also change the color on Mouseover

Please help.

Thanks in advance.

Posted 6-Aug-12 0:35am

Ranjith Reddy CSE

Updated 6-Aug-12 0:53am

_Amy

v3

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sangramsingh Pawar · Answer 1 · 2012-08-06T00:40:00

Solution 1

Try following

CSS

#GridView1 tr.rowHover:hover

   {

       background-color: Yellow;

       font-family: Arial;

   }

ASP.NET

<asp:gridview id="GridView1" runat="server" enableviewstate="false" rowstyle-cssclass="rowHover" clientidmode="Static" xmlns:asp="#unknown" />

Posted 6-Aug-12 0:40am

Sangramsingh Pawar

Comments

Ranjith Reddy CSE 6-Aug-12 6:47am

Sorry boss , its not working

Please help.

Sangramsingh Pawar 6-Aug-12 6:53am

look following article
http://www.codeproject.com/Articles/25984/Hover-Effects-for-GridView-Rows-Using-CSS

_Amy · Answer 2 · 2012-08-06T00:52:00

Hi,
Add two more attributes, 1st remove the background color of particular cell on mouse hover and then add the previews background color on mouse out. Then only this parent style will work. Try this:

C#

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Remove your cell style here
        GridViewRow s = (GridViewRow)e.Row;
        s.Cells[5].Attributes.Add("onmouseover", "oDiv.style.removeProperty('background-color');");
        //Add your cell style here
        s.Cells[5].Attributes.Add("onmouseout", "oDiv.style.background-color=#FFFF");

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

    }
}

--amit

Ganesh Nikam · Answer 3 · 2012-08-06T00:55:00

Solution 3

read this article
http://www.dotnetfunda.com/articles/article1374-how-to-display-mouseover-effect-in-gridview-rows-using-only-css.aspx[^]

Posted 6-Aug-12 0:55am

Ganesh Nikam

Member 11572984 · Answer 4 · 2015-04-06T03:33:00

Solution 4

Please find the below link for the solution

http://www.getmscode.com/2014/03/changing-row-color-of-grid-on-mouse-over.html[^]

Posted 6-Apr-15 3:33am

Member 11572984