Adding Dynamic OnClick Event and Tooltip to ListView
I have used and been using OnClick events and tooltips over the GridView control so many times in my 2.0 based projects. I believe it is a good practice for the usability of the presentation layer. I thought it may also be a good feature to add them to the ListView control as well.
Firstly
In order to have a more beautiful tooltip and have some flexibility about its presentation, I found a very good JavaScript resource on the web and applied it directly to my code. Take a look at that one first.
• I will be using the same ListView scenario and the Access database that I used before in this post.
Solution
As I use OnRowDataBound method in GridView for the purpose, I decided to use the OnItemDataBound method in ListView. After assigning this method’s value to “CountryListBound”, here is code part:
whereas trIT controls are:
For the Tooltip object, I designed its CSS class as:
After application file is debugged, browser shows the following screens:
• When cursor is mouse over’ed
• When the item (actually row) with ID of 10 is OnClick’ed:
Download
Sample source code can be downloaded via here.
Awesome post Mustafa!
I have been trying to put a tooltip to my table, and you just saved my weekend.
Mark W.
January 6, 2008 at 12:53 PM
Is there a way to put this onclick event and tooltip to a specific column instead of putting them to the row?
Jeff
January 8, 2008 at 11:18 AM
Jeff,
You can put the OnClick event and tooltip property on the column level as well. For instance, assuming that you want to put the same event and tooltip text to CountryName column:
- Assign an ID attribute as “tdIT” to the second TD tags in ItemTemplate and AlternatingItemTemplate
- Modify the CountryListBound sub (the part which is after defining “strRowInfo”) as:
Dim tdItem As HtmlTableCell = CType(e.Item.FindControl(“tdIT”), HtmlTableCell)
tdItem.Attributes.Add(“onclick”, “alert(‘” & strRowInfo & “‘)”)
tdItem.Attributes.Add(“onmouseover”, “tooltip(‘” & strRowInfo & “‘);”)
tdItem.Attributes.Add(“onmouseout”, “exit();”)
Hope this helps!
Mustafa Basgun
January 8, 2008 at 5:57 PM
Thanks Mustafa.
Jeff
January 9, 2008 at 1:40 PM
Very good article.
Especially thanks for showing how to retrieve values by ListViewDataItem and DataRowView.
Looking forward to more cool stuff here. :)
Justin
January 10, 2008 at 4:21 PM
Hi,
I have tried out the above query. Is there a way to put this onclick event and tooltip to a specific column instead of putting them to the row?
I tested using the code given, but not working. Can anyone help me out for to show tooltip when mouse over the cell?
Midhun
June 16, 2008 at 3:40 PM
Midhun,
If you look at the 3rd comment, you will find an explanation about how to put tooltip property and OnClick event to the column level.
Is there any specific error that you are getting when using the code given? Did you try downloading the sample code and running the demo application?
Mustafa Basgun
June 17, 2008 at 6:58 AM
Anyone have any idea how to nest a loop? For example, if you are dealing with XML and while the ItemTemplate is writing out, you want to loop through the children as well?
I am a noob and have no idea if this is easy/possible or not…
Lars
July 7, 2008 at 1:42 AM
Lars,
Nesting a loop inside another loop is surely possible.
You can look at the following sample code written in VB.NET:
http://www.java2s.com/Code/ASP/Development/NestDoUntilloopinsideForloopVBnet.htm
Hope this helps.
Mustafa Basgun
July 7, 2008 at 9:01 AM
Thanks!
Neelam
January 13, 2009 at 2:19 AM