MouseOver Coloring of DataGrid
page 1 of 1
Published: 07 Oct 2003
Unedited - Community Contributed
We can use a Helper Function to mark some data as different color/highlighted based on certain criteria. Now, I'd like to share how to make a datagrid that can changing the color of the data and mouse cursor when Mouse Over/Out on it
by Colt Kwong
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 8990/ 10

MouseOver Coloring and Click on DataGrid

Coloring in DataGrid is not any news... As from my previous article, we can use a Helper Function to mark some data as different color/highlighted based on certain criteria.

Now, I'd like to share how to make a datagrid that can changing the color of the data and mouse cursor when Mouse Over/Out!
As we all know that we can build a Data-Driven application easily in ASP.NET, while displaying the data on screen can be accompanished in several mouse click/typing, it is because all of the job are passed to DataGrid. DataGrid is a rich and powerful control, which will be render as a < TABLE/> in fact. Yes, it's a Table with < TR/> and < TD/> 

In order to make a colorful row of data, we're actually manipulating the backgroundColor of a TableRow. From the DataGrid point of view, these TableRows are belongs to type of ListItemType.Item or ListItemType.AlternatingItem. So we have to write a pair of OnMouseOver and OnMouseOut Javascript method target for these types of Items in order to toggle the color of a TableCell dynamically. E.g.

If e.Item.ItemType = ListItemType.Item Or _       
       e.Item.ItemType = ListItemType.AlternatingItem Then

   e.Item.Attributes.Add("onmouseover", "'Silver'")
   e.Item.Attributes.Add("onmouseout", "'white'")

End If

We put these lines of code in the DataGrid.ItemDataBound event handler because this event will be fired after data is bounded to the DataGrid, but just before it's actually display on screen. Moreover, how about if we just want to show a mouseOver/Out effect for a particular "column" instead of a complete Row? Yes, we work in the whole ListItem before, and we can now work with the "cell" on a "ListItem"! E.g.
e.Item.Cells(3).Style("cursor") = "hand"

Apart from changing the color, we can do what we want for a DataGrid, as we can do in the classic ASP or < TABLE/> control.
E.g. We can change the MouseOver Cursor to a little hand instead of the boring Arrow as stated in above.

Moreover, we can also add an Javascript alert method to the Attributes of a TableCell! E.g.

Dim AlertMessage As String = e.Item.Cells(1).Texte.Item.Cells(3).Attributes.Add("onclick", "alert('You click at ID: " & e.Item.Cells(0).Text & "!');")

Ok, let's see this little trick in action!

Demo          Download

User Comments

Title: Thanks. Great Job   
Name: Viji
Date: 2009-02-10 5:20:45 AM
Thanks. I got answer for my question. Its working fine.
Title: Great Article Thank U   
Name: David Chennai
Date: 2008-10-11 5:52:54 PM
ur article is great. but i want to know how to get the original color of the grid.
Plz Help.
Title: Still not working   
Name: Tricky
Date: 2008-05-15 6:47:11 AM
Demo still not working
Title: ur demo not wrking   
Name: mehul
Date: 2008-04-22 11:13:39 AM
ur demo link not working tx
Title: U R great!!!   
Name: Muthupandian
Date: 2007-12-26 2:29:40 AM
This is a great job.Please update ur works regularly
Title: thank u KEEP THE JOB GOING   
Date: 2007-10-24 3:34:12 AM
This is a great job.Please update ur works regularly so that we get beneficial
Title: Hi Mr. Genious,   
Name: Michael
Date: 2007-10-18 1:03:04 AM
Your demo is awesome. I can't believe I now can make the row of datagrid color to change, just the way your demo does. Thanks a ton. I would appreciate it very much more if you can help me this: In this link ( ), there are hyperlinks CURSOR, ASP, and APPLICATION. When we roll mouse over these 3 links, they display a nother window (not a popup; that's the best part of it). Would you please show me how to do that with, VS 1.1? I am able to use mouseover for the textbox, but not able to do the same with Hyperlinks. Can you do that without using Ajax? Thanks very much.
Title: very good   
Name: Raghu
Date: 2007-08-06 11:08:28 AM
you are amazing, was finding for this was surprised to such a great code. hats offfff.....
Title: Excellent!   
Name: Brandy
Date: 2007-07-31 10:58:33 AM
I've battled with this, getting it and then losing it, seemingly forever. You're example and explanation is very thorough and very clear.

Title: Mr.   
Name: Pushpendra
Date: 2007-03-03 1:27:28 AM
Hi Colt Kwong,
This is really good article for mouseover and mouseout effects on a datagrid.

Title: Very Helpfull   
Name: Rohit Rathod
Date: 2006-09-28 4:36:02 AM
This is very helpful for the mouse over effect in datagrid.
Title: About Edit Item Template Column?   
Name: Jesuraj
Date: 2006-06-27 2:51:21 AM
How Bind Data to Edit item TextBox using HashTable?
Title: u r superb   
Name: Sajjad
Date: 2006-06-14 9:52:20 AM
this is amazing
Title: Mr   
Name: Themos
Date: 2006-04-10 6:47:44 AM
Amazing work! thnx!!
Title: Feedback   
Name: Swarupa
Date: 2006-03-01 2:14:47 AM
One of the best article
Title: access   
Name: nick
Date: 2005-11-22 5:17:20 PM
can anyone post a way to do this using an access database and a OLEDB Connection

i can't seem to get this to work.
Title: Helpfull   
Name: Rochman B. Agung
Date: 2005-11-18 9:01:51 PM
Your description of this function is clear, very helpfull and usefull specially for beginer .net programmer. Thank's.
Title: RE: How to write an alert message for a Data Grid Item   
Name: Colt Kwong
Date: 2005-11-15 5:02:31 AM
Hi Ranjit,

You may take a look at the last paragraph above about the use of AlertMessage with the OnClick event handler.

Colt Kwong
Title: How to write an alert message for a Data Grid Item   
Name: Ranjit Varma
Date: 2005-11-15 4:56:00 AM
How to write a alert message for Grid Item On clicking it directly without selecting a value in the Grid .
Title: Does that mean i can apply it to a cinema seat booking?   
Name: Ivan
Date: 2005-11-14 7:32:27 AM
i am a novice trying to develop a school project to book cinema seats. DO you think i can apply your method to display bitmaps of seats of various statuses, that can be changed dynamically when clicked?
Title: Cool   
Name: Rick P.
Date: 2005-09-27 12:39:32 PM
Cool and well documented article.

Title: MouseoverColoring of Datagrid   
Name: Evonne Gonsalves
Date: 2005-09-05 4:35:32 AM
Works amazing and also the code is so simple!

Made my grids look attractive; thanks.

Title: Mr   
Name: Bala
Date: 2005-06-02 5:20:48 AM
Dear Colt Kwong,

Great article...very useful..

Title: thanyou   
Name: Angela
Date: 2005-04-07 5:53:29 PM
I have just tried this and it works brilliantly,

Angela :o)
Title: Multiple Column CommandName Detection   
Name: Larry Geore
Date: 2004-12-10 11:33:07 AM
With e.Item
If .ItemType = ListItemType.Header Or .ItemType = ListItemType.Footer Or _
.ItemType = ListItemType.Pager Then Exit Sub
REM go through the cells
Dim Idx As Integer
For Idx = 0 To e.Item.Cells.Count - 1
If e.Item.Cells(Idx).Controls.Count > 0 Then
If TypeOf (e.Item.Cells(Idx).Controls(0)) Is LinkButton Then
Dim btnSelect As LinkButton = CType(e.Item.Cells(Idx).Controls(0), LinkButton)
.Cells(Idx).Attributes("onclick") = Page.GetPostBackClientHyperlink(btnSelect, "")
.Cells(Idx).Style("Cursor") = "Hand"
End If
End If
End With

BTW Nice Work
Title: How about alternating grid colors?   
Name: Tony Farrell
Date: 2004-07-14 3:14:19 PM
Colt -

How about handling alternating background colors in the grid??


Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-06-15 10:20:26 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search