Problem - Tooltips have to be rebound every callback ?

9 posts, 0 answers
  1. Jon Hobbs
    Jon Hobbs avatar
    48 posts
    Member since:
    May 2007

    Posted 14 Jun 2007 Link to this post

    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

    1<%@ Page Language="VB" %> 
    2 
    3<%@ Import Namespace="System.Configuration.ConfigurationManager" %> 
    4<%@ Import Namespace="System.Data" %> 
    5<%@ Import Namespace="System.Data.SqlClient" %> 
    6<%@ Import Namespace="Tvi" %> 
    7 
    8<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    9 
    10 
    11<%@ register src="OtherControls/PhotoComments.ascx" tagname="PhotoComments" tagprefix="MMALO" %> 
    12 
    13 
    14<script runat="server"
    15     
    16    Dim Reader As SqlDataReader 
    17    Dim Files As String = AppSettings("files_url") 
    18     
    19    Sub Page_Load() 
    20         
    21        If Not Page.IsPostBack Then 
    22            BindPhotos(Request.QueryString("ID")) 
    23        End If 
    24         
    25    End Sub 
    26     
    27     
    28     
    29     
    30    Sub BindPhotos(ByVal GalleryID As Integer) 
    31         
    32 
    33        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 " 
    34        PhotoSQL += "FROM Photos P " 
    35        PhotoSQL += "INNER JOIN PhotoGalleries PG ON P.PhotoGalleryID = PG.ID " 
    36        PhotoSQL += "LEFT OUTER JOIN PhotoComments PC ON PPC.PhotoID = P.ID " 
    37        PhotoSQL += "WHERE P.Status='Live' AND PG.ID='" + GalleryID.ToString + "';" 
    38                 
    39        DL_Photos.DataSource = Database.getDataReader(PhotoSQL) 
    40        DL_Photos.DataBind() 
    41         
    42    End Sub 
    43 
    44     
    45 
    46     
    47    Sub Photos_Bound(ByVal obj As Object, ByVal e As DataListItemEventArgs) 
    48         
    49        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then 
    50             
    51             
    52            ''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
    53            ' Add tooltips 
    54            ''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
    55             
    56            Dim CommentLabel As HtmlGenericControl = DirectCast(e.Item.FindControl("lbViewComments"), HtmlGenericControl) 
    57             
    58            CommentLabel.ID = e.Item.DataItem("PhotoID").ToString 
    59 
    60            CommentToolTip.TargetControls.Add(CommentLabel.ClientID, True) 
    61             
    62 
    63            ''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
    64            ' Hide Comment Boxes 
    65            ''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
    66             
    67            CType(e.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = "False" 
    68             
    69             
    70        End If 
    71    End Sub 
    72     
    73     
    74     
    75     
    76     
    77    Protected Sub OnAjaxUpdate(ByVal sender As Object, ByVal args As ToolTipUpdateEventArgs) 
    78         
    79         
    80        Dim index As Integer = args.TargetControlID.LastIndexOf("_") 
    81        Dim elementID As String = args.TargetControlID.Substring(index + 1) 
    82         
    83        Dim PhotoComments As New PhotoComments 
    84        args.UpdatePanel.ContentTemplateContainer.Controls.Add(PhotoComments) 
    85         
    86        Dim Comments As PhotoComments = DirectCast(PhotoComments, PhotoComments) 
    87        Comments.PhotoID = elementID 
    88         
    89         
    90    End Sub 
    91     
    92     
    93     
    94     
    95    Sub PhotoCommand(ByVal obj As Object, ByVal E As DataListCommandEventArgs) 
    96         
    97        Dim Command As String = E.CommandName 
    98        Dim Argument As String = E.CommandArgument 
    99 
    100 
    101        Select Case Command 
    102              
    103            Case "OpenCommentBox" 
    104                     
    105                CType(E.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = True 
    106                      
    107            Case "CancelComment" 
    108                 
    109                CType(E.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = False 
    110                 
    111                 
    112            Case "AddComment" 
    113                     
    114                '  --->>>  Code for adding the comment to the DB goes here. 
    115                     
    116                CType(E.Item.FindControl("CommentBox"), TextBox).Text = "" 
    117                CType(E.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = False 
    118                     
    119                      
    120        End Select 
    121         
    122    End Sub 
    123     
    124     
    125    Sub InitiateCallback(ByVal obj As Object, ByVal E As EventArgs) 
    126        BindPhotos(Request.QueryString("ID")) 
    127    End Sub 
    128    
    129     
    130</script> 
    131 
    132 
    133 
    134<html xmlns="http://www.w3.org/1999/xhtml" > 
    135 
    136<head> 
    137</head> 
    138 
    139<body> 
    140    <form id="form1" runat="server"
    141     
    142     
    143        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> 
    144 
    145 
    146        <asp:UpdatePanel ID="PhotoPanel" runat="server"
    147            <ContentTemplate> 
    148             
    149                <asp:LinkButton ID="Initiate" runat="server" OnClick="InitiateCallback" Text="Click here to initiate a callback and rebind the datalist" /> 
    150                 
    151                <br /> 
    152                <br /> 
    153                 
    154                <asp:DataList CellSpacing="8" ID="DL_Photos" OnItemCommand="PhotoCommand" OnItemDataBound="Photos_Bound" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" CssClass="GalleryTable"
    155                    <ItemStyle CssClass="GalleryPhoto" /> 
    156                    <ItemTemplate> 
    157                        <img src="<%# Files + DataBinder.Eval(Container.DataItem, "Thumbnail")%>" /> 
    158                            <div> 
    159                                <asp:LinkButton ID="OpenCommentBoxButton" CommandName="OpenCommentBox" runat="server" Text="Add Comment"/>  
    160                                <span ID="lbViewComments" style="cursor:pointer;" runat="server">10 Comments</b></span
    161                            </div> 
    162                            <div id="CommentBoxDiv" runat="server"
    163                                <asp:textbox ID="CommentBox" runat="server" TextMode="MultiLine" Width="180" height="82" CssClass="CommentBox" /> 
    164                                <br /> 
    165                                <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> 
    166                            </div> 
    167                        </div> 
    168                    </ItemTemplate> 
    169                </asp:DataList> 
    170            </ContentTemplate> 
    171        </asp:UpdatePanel> 
    172                             
    173        <telerik:radtooltipmanager  
    174            runat="server"  
    175            id="CommentToolTip"  
    176            ManualClose="true" 
    177            showevent="Onclick"  
    178            Sticky="true"  
    179            Skin="Web20"  
    180            Width="350px" 
    181            Height="250px"  
    182            Position="MiddleRight"  
    183            OffsetX="6"   
    184            onajaxupdate="onajaxupdate" > 
    185        </telerik:radtooltipmanager> 
    186    </form> 
    187 
    188</body> 
    189 
    190</html> 

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 15 Jun 2007 Link to this post

    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
  3. Jon Hobbs
    Jon Hobbs avatar
    48 posts
    Member since:
    May 2007

    Posted 15 Jun 2007 Link to this post

    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
  4. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 15 Jun 2007 Link to this post

    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
  5. Jon Hobbs
    Jon Hobbs avatar
    14 posts
    Member since:
    Mar 2005

    Posted 26 Jun 2007 Link to this post

    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 ?


  6. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 29 Jun 2007 Link to this post

    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
  7. Jon Hobbs
    Jon Hobbs avatar
    14 posts
    Member since:
    Mar 2005

    Posted 29 Jun 2007 Link to this post

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

    1Protected Sub OnAjaxUpdate(ByVal sender As Object, ByVal args As ToolTipUpdateEventArgs) 
    2         
    3         
    4        Dim index As Integer = args.TargetControlID.LastIndexOf("_") 
    5        Dim elementID As String = args.TargetControlID.Substring(index + 1) 
    6         
    7        Dim PhotoComments As New PhotoComments 
    8        PhotoComments.PhotoID = elementID 
    9        args.UpdatePanel.ContentTemplateContainer.Controls.Add(PhotoComments) 
    10         
    11        BindPhotos(Request.QueryString("ID")) 
    12         
    13    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

  8. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 04 Jul 2007 Link to this post

    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
  9. Jon Hobbs
    Jon Hobbs avatar
    14 posts
    Member since:
    Mar 2005

    Posted 04 Jul 2007 Link to this post

    Hi Tervel,

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

    Jon
Back to Top