This is a migrated thread and some comments may be shown as answers.

Problem - Tooltips have to be rebound every callback ?

8 Answers 184 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Jon Hobbs
Top achievements
Rank 1
Jon Hobbs asked on 14 Jun 2007, 11:54 PM
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> 

8 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 15 Jun 2007, 08:40 AM
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
0
Jon Hobbs
Top achievements
Rank 1
answered on 15 Jun 2007, 12:21 PM
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
0
Tsvetie
Telerik team
answered on 15 Jun 2007, 01:40 PM
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
0
Jon Hobbs
Top achievements
Rank 1
answered on 26 Jun 2007, 02:16 PM
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 ?


0
Tsvetie
Telerik team
answered on 29 Jun 2007, 07:48 AM
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
0
Jon Hobbs
Top achievements
Rank 1
answered on 29 Jun 2007, 10:41 PM
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

0
Tervel
Telerik team
answered on 04 Jul 2007, 01:54 PM
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
0
Jon Hobbs
Top achievements
Rank 1
answered on 04 Jul 2007, 01:59 PM
Hi Tervel,

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

Jon
Tags
ToolTip
Asked by
Jon Hobbs
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Jon Hobbs
Top achievements
Rank 1
Jon Hobbs
Top achievements
Rank 1
Tervel
Telerik team
Share this question
or