[Solved] Problem - Tooltips have to be rebound every callback ?

[Jon Hobbs]

Hi,

I have a problem with a tooltipmanager which is quite complicated but I will try to explain......

My page contains a datalist of Photos. Under each photo is a textbox which is initially hidden (visibility=false), there is also a button to open the textbox and a span which has Rad:Tooltips bound to it.

My problem is that the Tooltips only show when the page is initially loaded. If I initiate a callback they stop working, unless I reload the photos from the database and Databind the Datalist again.

I really can't rebind the datalist on every callback as it clears the contents on my textboxes and makes them go invisible again.

(Of course, if anybody knows how I can rebind the photos without clearing the textboxes and making them invisible that would also fix the problem I suppose)

I have provided some code below which is as simple as I can make it. You can see it running at the following URL  - Click here

	<%@ Page Language="VB" %>
	<%@ Import Namespace="System.Configuration.ConfigurationManager" %>
	<%@ Import Namespace="System.Data" %>
	<%@ Import Namespace="System.Data.SqlClient" %>
	<%@ Import Namespace="Tvi" %>
	<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
	<%@ register src="OtherControls/PhotoComments.ascx" tagname="PhotoComments" tagprefix="MMALO" %>
	<script runat="server">
	Dim Reader As SqlDataReader
	Dim Files As String = AppSettings("files_url")
	Sub Page_Load()
	If Not Page.IsPostBack Then
	BindPhotos(Request.QueryString("ID"))
	End If
	End Sub
	Sub BindPhotos(ByVal GalleryID As Integer)
	Dim PhotoSQL As String = "SELECT P.ID AS PhotoID, p.Thumbnail AS Thumbnail, p.Photo AS Photo, P.Caption AS Caption, P.TagCount AS TagCount "
	PhotoSQL += "FROM Photos P "
	PhotoSQL += "INNER JOIN PhotoGalleries PG ON P.PhotoGalleryID = PG.ID "
	PhotoSQL += "LEFT OUTER JOIN PhotoComments PC ON PPC.PhotoID = P.ID "
	PhotoSQL += "WHERE P.Status='Live' AND PG.ID='" + GalleryID.ToString + "';"
	DL_Photos.DataSource = Database.getDataReader(PhotoSQL)
	DL_Photos.DataBind()
	End Sub
	Sub Photos_Bound(ByVal obj As Object, ByVal e As DataListItemEventArgs)
	If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
	'''''''''''''''''''''''''''''''''''''''''''''''''''''''''
	' Add tooltips
	'''''''''''''''''''''''''''''''''''''''''''''''''''''''''
	Dim CommentLabel As HtmlGenericControl = DirectCast(e.Item.FindControl("lbViewComments"), HtmlGenericControl)
	CommentLabel.ID = e.Item.DataItem("PhotoID").ToString
	CommentToolTip.TargetControls.Add(CommentLabel.ClientID, True)
	'''''''''''''''''''''''''''''''''''''''''''''''''''''''''
	' Hide Comment Boxes
	'''''''''''''''''''''''''''''''''''''''''''''''''''''''''
	CType(e.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = "False"
	End If
	End Sub
	Protected Sub OnAjaxUpdate(ByVal sender As Object, ByVal args As ToolTipUpdateEventArgs)
	Dim index As Integer = args.TargetControlID.LastIndexOf("_")
	Dim elementID As String = args.TargetControlID.Substring(index + 1)
	Dim PhotoComments As New PhotoComments
	args.UpdatePanel.ContentTemplateContainer.Controls.Add(PhotoComments)
	Dim Comments As PhotoComments = DirectCast(PhotoComments, PhotoComments)
	Comments.PhotoID = elementID
	End Sub
	Sub PhotoCommand(ByVal obj As Object, ByVal E As DataListCommandEventArgs)
	Dim Command As String = E.CommandName
	Dim Argument As String = E.CommandArgument
	Select Case Command
	Case "OpenCommentBox"
	CType(E.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = True
	Case "CancelComment"
	CType(E.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = False
	Case "AddComment"
	'  --->>>  Code for adding the comment to the DB goes here.
	CType(E.Item.FindControl("CommentBox"), TextBox).Text = ""
	CType(E.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = False
	End Select
	End Sub
	Sub InitiateCallback(ByVal obj As Object, ByVal E As EventArgs)
	BindPhotos(Request.QueryString("ID"))
	End Sub
	</script>
	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
	</head>
	<body>
	<form id="form1" runat="server">
	<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
	<asp:UpdatePanel ID="PhotoPanel" runat="server">
	<ContentTemplate>
	<asp:LinkButton ID="Initiate" runat="server" OnClick="InitiateCallback" Text="Click here to initiate a callback and rebind the datalist" />
	<br />
	<br />
	<asp:DataList CellSpacing="8" ID="DL_Photos" OnItemCommand="PhotoCommand" OnItemDataBound="Photos_Bound" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" CssClass="GalleryTable">
	<ItemStyle CssClass="GalleryPhoto" />
	<ItemTemplate>
	<img src="<%# Files + DataBinder.Eval(Container.DataItem, "Thumbnail")%>" />
	<div>
	<asp:LinkButton ID="OpenCommentBoxButton" CommandName="OpenCommentBox" runat="server" Text="Add Comment"/>
	<span ID="lbViewComments" style="cursor:pointer;" runat="server">10 Comments</b></span>
	</div>
	<div id="CommentBoxDiv" runat="server">
	<asp:textbox ID="CommentBox" runat="server" TextMode="MultiLine" Width="180" height="82" CssClass="CommentBox" />
	<br />
	<asp:LinkButton ID="CommentAddButton" runat="Server" CommandName="AddComment" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "PhotoID") %>' ><IMG SRC="i/CommentButtonAdd.jpg" /></asp:LinkButton> <asp:LinkButton ID="CommentCancelButton" CommandName="CancelComment" runat="Server"><IMG SRC="i/CommentButtonCancel.jpg" /></asp:LinkButton>
	</div>
	</div>
	</ItemTemplate>
	</asp:DataList>
	</ContentTemplate>
	</asp:UpdatePanel>
	<telerik:radtooltipmanager
	runat="server"
	id="CommentToolTip"
	ManualClose="true"
	showevent="Onclick"
	Sticky="true"
	Skin="Web20"
	Width="350px"
	Height="250px"
	Position="MiddleRight"
	OffsetX="6"
	onajaxupdate="onajaxupdate" >
	</telerik:radtooltipmanager>
	</form>
	</body>
	</html>

[Tsvetie]

Hello Jon Hobbs,
We are aware of this behavior and have updated the RadToolTipManager so that it persists its TargetControls collection across postbacks. Please open a new support ticket and we will send you the hotfix.

However, I can see that you have placed the DataList and the link button in the same UpdatePanel and that you assign the ID of the SPAN element in the Photos_Bound handler. Once you click the button, the content of the UpdatePanel is refreshed and in case you do not rebind the DataList, the ID of the SPAN element will change.

Kind regards,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jon Hobbs]

Hi Tsvetie,

Thanks for your reply. Because the Button is inside the datalist I think it all has to be in the same UpdatePanel.

Is there a better way to add the tooltips to to the "CommentLabel" other than doing it in Photos_Bound() ? I'm very confused by this and need to find  a way of getting the tooltips working after a callback without re-binding the photos.

Thanks again, Jon

[Tsvetie]

Hi Jon Hobbs,
In case you do not change the IDs of the SPAN element in the code-behind, for example - just set them in the ASPX and do not change them, you will not need to re-bind the DataList. As mentioned, the version of the RadToolTip control from the hotfix I just sent you, remembers its TargetControls collection across postbacks, and in case the IDs do not change, you will not have problems. 

All the best,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jon Hobbs]

Sorry, I have been on holiday, now I am back and I am still very confused......

In my Photos_Bound() sub i do the following....

Dim CommentLabel As HtmlGenericControl = DirectCast(e.Item.FindControl("lbViewComments"), HtmlGenericControl)

CommentLabel.ID = e.Item.DataItem("PhotoID").ToString

CommentToolTip.TargetControls.Add(CommentLabel.ClientID, True)

Is this the bit that is causing the problem ? I copied this from one of your demos and changed it a bit, how can I bind the tooltips without doing it in the code behind ?

[Tsvetie]

Hello Jon Hobbs,
Just remove the following line:

CommentLabel.ID = e.Item.DataItem("PhotoID").ToString 

The problem comes form the fact that you only change the IDs of the CommentLabels in the Photos_Bound(). In case you do not execute that function on every callback, the IDs of the CommentLabels will not change. And as you have added the changed IDs to the TargetControls collection of the manager, it will tooltipify elements (if any) with the changed IDs. That is why you cannot use that approach.

In our online example, there is no event that changes the IDs back to the original ones.

All the best,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jon Hobbs]

OK, you must be getting pretty bored with me now :)

I think I understand why it is not working but this causes me a problem.

The reason I rename the ID of that label with the ID of the photo is because in my OnAjaxUpdate sub I need to get the ID of the photo but I only have access to args.TargetControlID , not the Item that contains the target control, like this...

	Protected Sub OnAjaxUpdate(ByVal sender As Object, ByVal args As ToolTipUpdateEventArgs)
	Dim index As Integer = args.TargetControlID.LastIndexOf("_")
	Dim elementID As String = args.TargetControlID.Substring(index + 1)
	Dim PhotoComments As New PhotoComments
	PhotoComments.PhotoID = elementID
	args.UpdatePanel.ContentTemplateContainer.Controls.Add(PhotoComments)
	BindPhotos(Request.QueryString("ID"))
	End Sub

I tried renaming the ID in the actual repeater by doing this...

<span ID='<%# DataBinder.Eval(Container.DataItem, "PhotoID") %>' class="PhotoLinks" style="cursor:pointer;" runat="server">

but got the following error...

The ID property of a control can only be set using the ID attribute in the tag and a simple value. Example: <asp:Button runat="server" id="Button1" />

Is there a way round this ?

Jon

[Tervel]

Hello Jon,

It seems that the best way to continue is to open a support ticket, and send us a sample fully functional project, that works correctly the first time the page loads. Once we have the project, we will modify it for you to work properly in your scenario.

Best regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jon Hobbs]

Hi Tervel,

Thank you. It might take me a few days to make that but I will certainly do that.

Jon