how to apply mouse over effect on Asp.net grid-view?

Question

0.00/5 (No votes)

See more:

I have made a CSS class for grid view and a class for grid view's row hover but it is not happening that I want, there is no mouse over effect.

this is grid view setting

XML

<asp:GridView ID="grd" runat="server" Width="99%" EnableViewState="False" AutoGenerateColumns="False" CssClass="grid-view" DataKeyNames="Nt">// some bound filds here <alternatingrowstyle backcolor="#FFB6C1" /> <rowstyle backcolor="White" forecolor="Black" font-names="Verdana" />

Css Class

CSS

.grid-view tr.normal:hover { background-color: Green; } 
.grid-view tr.alternate:hover { background-color: Green; }

Posted 27-Jun-13 22:19pm

Hammad Butt

Updated 10-May-17 5:11am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v2

Add a Solution

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 1 · 2013-06-27T22:48:00

Solution 1

Add the CssClass to the RowStyle and AlternatingRowStyle like below and try.

HTML

<AlternatingRowStyle BackColor="#FFB6C1" CssClass="alternate" />

<RowStyle BackColor="White" ForeColor="Black" Font-Names="Verdana" CssClass="normal" />

[Edit]

1. How to display mouseover effect in GridView rows using only CSS?[^].
2. Code To Display Mouseover Effect In GridView Rows Using Only CSS[^].

[/Edit]

Posted 27-Jun-13 22:48pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Updated 27-Jun-13 23:38pm

v3

Comments

Hammad Butt 28-Jun-13 5:19am

this is not happening brother.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 28-Jun-13 5:39am

Then try some other techniques. Answer updated, please see.

Shraddha R Kad · Answer 2 · 2013-06-27T23:07:00

Solution 2

Using JQuery
============

JavaScript

$(document).ready(function() {
        $("#<%=grd.ClientID %> tr:has(td)").hover(function() 
        {
            $(this).css({ "background-color": "Green", "cursor": "pointer" });
        },
        function() 
        {
            $(this).css("background-color", "White");
        }); 
    });

Posted 27-Jun-13 23:07pm

Shraddha R Kad

Updated 27-Jun-13 23:39pm

v2

Comments

Hammad Butt 28-Jun-13 6:22am

this is producing error
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Murali0195 · Answer 3 · 2013-06-27T23:29:00

Solution 3

Hi...
See the below link.
Highlight asp.net gridview rows on mouseover - out using JavaScript[^]
thank u.

Posted 27-Jun-13 23:29pm

Murali0195

Updated 27-Jun-13 23:39pm

v2

**Nirav Prabtani** · Answer 4 · 2013-06-27T23:30:00

Solution 4

Try This...:)

C#

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

Posted 27-Jun-13 23:30pm

Nirav Prabtani

Comments

Hammad Butt 28-Jun-13 7:07am

not working in my case. Actually my grid is inside a table then panel.
I think this is creating problem. what you say.
I need some solution for my case.

Nirav Prabtani 28-Jun-13 7:21am

Try This....:)

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

Hammad Butt 28-Jun-13 7:40am

This link has same code as you mentioned before.

Nirav Prabtani 28-Jun-13 8:46am

ok...i m sorry...try this..:)

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

e.Row.Attributes.Add("onMouseOver", "Highlight(this)");

e.Row.Attributes.Add("onMouseOut", "UnHighlight(this)");

}

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

<script language="javascript">

function Highlight(row)

{

row.style.backgroundColor='red';

}

function UnHighlight(row)

{

row.style.backgroundColor='white';

}

</script>

</head>

<body>

<form id="form1" runat="server">

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"

DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">

<columns>

<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />

<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />

<asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName] FROM [Customers]">

</form>

</body>

</html>

Nirav Prabtani 28-Jun-13 8:47am

http://www.aspdotnet-suresh.com/2011/02/how-to-highlight-gridview-rows-on.html

_Amy · Answer 5 · 2013-06-27T23:31:00

Solution 5

Please refer the similar articles below:
Hover Effects for GridView Rows Using CSS[^]
How to display mouseover effect in GridView rows using only CSS?[^]
How to display mouseover effect on GridView rows using CSS?[^]

--Amit

Posted 27-Jun-13 23:31pm

_Amy

Comments

Hammad Butt 28-Jun-13 7:07am

I have tried it on a simple grid in another page, in that page it is working but in my real page it is not working. I don't know what's happening.

_Amy 28-Jun-13 7:08am

This means that your css is not loaded. Check for css reference on page.

Hammad Butt 28-Jun-13 7:37am

Other CSS effect are happening like font and color on all page.
Css is stored in another file.
This grid is inside a table, panel. Can this be a problem?