I read through a lot of articles regarding highlighting a row on mouse over...but I am not able to understand clearly on what to do.. since I am new to ASP.NET 2.0 . Can some1 please help me to understand this clearly with a step by step procedure... I have
a gridview which displays all records from a particular database....I would be really grateful...
sar484
Member
285 Points
57 Posts
highlight a particular row in a gridview on MouseOver
Aug 31, 2006 06:26 PM|LINK
hii..
I read through a lot of articles regarding highlighting a row on mouse over...but I am not able to understand clearly on what to do.. since I am new to ASP.NET 2.0 . Can some1 please help me to understand this clearly with a step by step procedure... I have a gridview which displays all records from a particular database....I would be really grateful...
Thanks
sbyard
Contributor
5891 Points
1196 Posts
Re: highlight a particular row in a gridview on MouseOver
Aug 31, 2006 07:02 PM|LINK
Javascript anyone?
<%@ 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" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName] FROM [Customers]">
</asp:SqlDataSource>
</form>
</body>
</html>
hardik.net
Member
149 Points
33 Posts
Re: highlight a particular row in a gridview on MouseOver
Aug 31, 2006 07:16 PM|LINK
hi !!
after adding code specified by sbyard you need to add following javascript in your code..
function Highlight(rID)
{
document.getElementById(rowID).style.backgroundColor = '#FF0000';
}
function UnHighlight(rID)
{
document.getElementById(rowID).style.backgroundColor = '';
}
Thanx
Hardik patel
sar484
Member
285 Points
57 Posts
Re: highlight a particular row in a gridview on MouseOver
Aug 31, 2006 08:14 PM|LINK
hii...
Thank You so much both of u.. I tried it and it worked like magic... :))
thanks again
blink18jew
Member
199 Points
648 Posts
Re: highlight a particular row in a gridview on MouseOver
Jul 14, 2007 12:00 AM|LINK
just wanted to thank you as this helped me a bunch! perfect! si!
hinu39
Member
26 Points
29 Posts
Re: highlight a particular row in a gridview on MouseOver
Jul 31, 2007 12:03 AM|LINK
where to write this code . please let me know. i mean "the function you specified after aspx page scripting"
Absolute_Zer...
Member
38 Points
49 Posts
Re: highlight a particular row in a gridview on MouseOver
Jun 20, 2008 03:46 PM|LINK
For anyone else interested in this, you don't have to write all that code. Just add the following to your CSS and it should work.
tr:hover { background-color:#E7E4DA; }