D'Arcy from Winnipeg
Musings of a Canadian Developer - Silverlight, ASP.NET, BizTalk, Life, and Technology
<< Show your Web Site's Solution File | Home | Google Launches Video Beta >>

Highlight Datagrid Rows on Mouse Over in ASP.NET

Wednesday, December 14, 2005 12:57 PM

This is a little tip that can add some ooo and aaah's to your client's reaction when showing off your web skillz. To make it so that your datagrid rows (in asp.net 1.1 or 2.0) change color on mouse over (and back on mouse out), simply:

Protected Sub DataGrid_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid.ItemCreated
         e.Item.Attributes.Add("OnMouseOver", "this.style.backgroundColor = 'lightblue';")
         e.Item.Attributes.Add("OnMouseOut", "this.style.backgroundColor = 'red;")
End Sub

D



  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Feedback

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

umm there is a much easier way.

in your css
.HeaderButton
{
background-color: black;
border: 0px;
behavior: url(/styles/rollover.htc);
}


in a .htc file

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Restore()" />

<SCRIPT LANGUAGE="JScript">

var normalColor;

function Hilite() {
normalColor = currentStyle.backgroundColor;
runtimeStyle.backgroundColor = "#FFFF66";
}

function Restore() {
runtimeStyle.backgroundColor = normalColor;
}

</SCRIPT>
</PUBLIC:COMPONENT>


12/15/2005 9:39 AM | Greg Young

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

Explain to me how writing a css class and two javascript functions within a .htc file is EASIER than two lines in a code behind file?

Especially when you can create one function that can take in a DataGridItemEventArgs as an argument to make the function totally reusable?

D 12/15/2005 9:46 AM | D'Arcy Lussier

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

The style sheet has the advantage that it can be applied to every datagrid site wide without a single line of additional code. This approach is very reusable and very modular.

The same htc file can easily be applied to any element through the stylesheet.

The style sheet approach has the disadvantage that not all browsers understand style sheet behaviors. This may or maynot be a concern. 12/15/2005 10:01 AM | Nick Harrison

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

Well ...

1) The code needs to be recompiled in order to make a change
2) your html is significantly larger my .htc and .cs get cached on the client side
3) I can apply mine to ALL datagrids on a pre-existing website without changing a line of code providing they have a style (or that the other tables have a style in other words that I can uniquely identify them). This may not seem like too big of a deal but I recently had to do this on a system that had over 1000 tables in the db and the front end had about as many datagrids which the previous developers had copy/pasted from one area to the next instead of creating a base datagrid control
12/15/2005 10:25 AM | Greg Young

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

and of course as nick pointed out, it can work for other things than datagrids i.e. buttons ...

12/15/2005 10:25 AM | Greg Young

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

and...

If you want the clicked rows to remain higlighted just add the following to the source code of Greg Young:

<PUBLIC:ATTACH EVENT="onclick" ONEVENT="HiliteClick()" />

function HiliteClick() {
normalColor = currentStyle.backgroundColor;
runtimeStyle.backgroundColor = "#FF0000";
}

BTW: tx for this, really helped me out! (works also in plain ASP)
just doesnt work in FireFox :( 1/6/2006 2:09 AM | Mannessen T

# Mouseover and MouseOut

Hi,

I am reterving values frm database on some Calendar. I want to Mouseover event so on particular day I can see some values through this event. I am using ASP.NET and C#.
Can Any one help me?

You can reply me on mahen1500@yahoo.com

Mahen 1/9/2006 12:52 AM | Mahen

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

I am going to have to side with D'Arcy on this even though she hails from Canada ;-)

Greg, while I like your solution the issue I see here is that HTC is not supported in other browsers such as FireFox. While that may not be a concern to some, I have yet to be on a project where it is not a requirement to support cross browser compatibility.

One change I would like to suggest to D'Arcy's solution however is to use 'this.className = 'myClassName' rather than something like 'this.style.backgroundColor = 'lightblue'. The reason is that now that color name is hard coded into the application source. At least with the className property you can specify a class in CSS and move back towards the flexibility of the style sheet driving any changes to actual color, font etc.

I will concede that this is not ideal from the standpoint that I have to put this in all of my DataGrids rather than having the global change offered by Greg's solution. DataGrid superclass anyone? :-) Thanks

DK

1/13/2006 8:09 AM | Donald King

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

Can we have a specific Top/Bottom border applied to the particular on a mouse over event.

Thanks,

Anand 3/9/2006 2:48 AM | Anand

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

It sure is obvious who the old school developers are.
Style sheets and client side script is a thing of the past.
If you do not agree you need to go back to the books!!!!! 3/10/2006 1:05 PM | GAM

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

What about alternating row colors? 5/10/2006 12:04 PM | Vinny

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

For alternating row colors I used a declared a private class variable named 'highlightCount' and do MOD check. I set the bgcolor to 'white' when the highlightCount is even and gray when it is odd.

Is there any way to set the header/footor rows to remain a certain color no matter what the mouse is doing?

Thanks,

zoop 9/7/2006 8:02 AM | zoopnfunk

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET


I think it's better to write code in RowData bound event ,i done it this will help u.(from himanshu sharma)

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';this.style.backgroundcolor='red';";
e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";
//e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.GridView1, "Select$" + e.Row.RowIndex);


}

} 9/19/2006 9:01 PM | Himanshu Sharma

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

Here's how I did alternating items, seemed to work pretty well for me:


Protected Sub DataGrid_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemCreated
Dim itemType As ListItemType
itemType = CType(e.Item.ItemType, ListItemType)
If (itemType <> ListItemType.Header) Then
If (itemType <> ListItemType.AlternatingItem) Then
e.Item.Attributes.Add("OnMouseOver", "this.style.backgroundColor = 'gray';")
e.Item.Attributes.Add("OnMouseOut", "this.style.backgroundColor = '#eeeeee';")
Else
e.Item.Attributes.Add("OnMouseOver", "this.style.backgroundColor = 'gray';")
e.Item.Attributes.Add("OnMouseOut", "this.style.backgroundColor = 'gainsboro';")
End If

End If
End Sub 10/3/2006 2:42 PM | XenoRyet

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

Exellent solution D'Arcy, XenoRyet, and Donald. 10/28/2006 11:44 PM | runax

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

I have a doubt plz clarify.
i am able to do mouse over and mouse out in a datagrid it is fine.
but i am clicking a particular row and it is getting highlighted it is also fine.
problem is when i want to click a new row i am not able to do so both the old row and new row are getting highlighted i want only one row to be highlighted on the click of the row.plz guide me 6/7/2007 9:35 PM | srikanth

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

Another technique that you can use is this css fragment: tr.ClassName:hover{background-color:fuchsia;} this will work on Firefox/Mozilla and Opera, but not on IE. On IE you can use the original htc script and CSS class name combo suggested by DK. The ItemCreated and ItemDatabound events will work on any browser, but you still have to recompile and attach the events to all your grids or subclass your own datagrid. 9/3/2007 4:32 PM | JohnnyB

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

The first reply about the .htc will not work in non-IE browsers. The Hypertext Component was a fix because in FireFox you can you the a tag to create highlighting, where in IE you can not. 1/23/2008 8:23 AM | Joe Gakenheimer

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

hai i want coding for to show full image in java script 1/23/2008 11:53 PM | venkat

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

This works with alternating rows, on mouseover it creates a variable in the scope of the current window and saves the old color there, then put's it back again on mouseout

if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
e.Item.Attributes.Add("onmouseover", "self.MouseOverOldColor=this.style.backgroundColor;this.style.backgroundColor='#BCCAD8'");
e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor=self.MouseOverOldColor");
}
1/31/2008 8:34 PM | PL

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

please send code of highlight the image on mouse over in asp.net 2/6/2008 3:35 AM | srinivas

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

@PL - "MouseOverOldColor" nice! I almost gave up on this, Thanks. 2/15/2008 3:50 PM | pCode

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

Hi, I would like to invite you into my site and see what you think and if you like

what yousee maybe we can be....


http://seofirm.ws/ 5/9/2008 3:33 PM | Seo Firm

# re: Highlight Datagrid Rows on Mouse Over in ASP.NET

If there is anything new, that is only one the Comment

http://seofirm.ws/ 5/9/2008 3:34 PM | Seo Firm
Post a comment





 

 

News



Disclaimer
The views expressed on this weblog are mine and do not necessarily reflect the views of my employer.

All postings are provided "AS IS" with no warranties, and confer no rights.

Twitter












Tag Cloud


Archives

Central Canadian UG's

Gamertag

Ignite Your Life

Peeps

Sites

Winnipeg Code Camp

Syndication:

 
© 2007 Website.com. Valid CSS & XHTML Website template by Arcsin adapted by timheuer