Personal Blog of Mustafa Basgun

Adding Dynamic OnClick Event and Tooltip to ListView

with 11 comments

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.

Advertisements

Written by Mustafa Basgun

January 6, 2008 at 7:00 AM

11 Responses

Subscribe to comments with RSS.

  1. 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

  2. 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

  3. 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

  4. Thanks Mustafa.

    Jeff

    January 9, 2008 at 1:40 PM

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

  6. 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

  7. 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

  8. 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

  9. 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

  10. Thanks!

    Neelam

    January 13, 2009 at 2:19 AM

  11. How would you modify “CType(e.Item.FindControl(“trRC”), HtmlTableRow)” if you are using a master page?

    TomG

    December 2, 2009 at 4:07 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: