Yet Another Blog on ASP.NET and Some Other Stuff

Adding Dynamic OnClick Event and Tooltip to ListView

Posted in ASP.NET, ListView, VB.NET, Web Development by Mustafa Basgun on January 6th, 2008

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.

7 Responses to 'Adding Dynamic OnClick Event and Tooltip to ListView'

Subscribe to comments with RSS or TrackBack to 'Adding Dynamic OnClick Event and Tooltip to ListView'.

  1. Mark W. said, on January 6th, 2008 at 12:53 pm

    Awesome post Mustafa!

    I have been trying to put a tooltip to my table, and you just saved my weekend.

  2. Jeff said, on January 8th, 2008 at 11:18 am

    Is there a way to put this onclick event and tooltip to a specific column instead of putting them to the row?

  3. Mustafa Basgun said, on January 8th, 2008 at 5:57 pm

    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!

  4. Jeff said, on January 9th, 2008 at 1:40 pm

    Thanks Mustafa.

  5. Justin said, on January 10th, 2008 at 4:21 pm

    Very good article.

    Especially thanks for showing how to retrieve values by ListViewDataItem and DataRowView.

    Looking forward to more cool stuff here. :)

  6. Midhun said, on June 16th, 2008 at 3:40 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?

  7. Mustafa Basgun said, on June 17th, 2008 at 6:58 am

    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?

Leave a Reply