Tooltips not working for RadListBox with EnableLoadOnDemand=true

4 posts, 0 answers
  1. William
    William avatar
    9 posts
    Member since:
    Oct 2010

    Posted 25 Oct 2011 Link to this post

    Hi,
    I am having problem getting the tooltips to work in the RadListBox. It works fine when I turn the EnableLoadOnDemand=false. But when I turn the EnableLoadOnDemand=true, only the first item in the list box works, the rest are not working. I have read a lot of different solutions but none works for me. Any idea how to do it? Thanks a lot!

    protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
    {
        this.UpdateToolTip(args.Value, args.UpdatePanel);
    }
      
    private void UpdateToolTip(string elementID, UpdatePanel panel)
    {
        Control ctrl = Page.LoadControl("PopupSampleDetails.ascx");
        panel.ContentTemplateContainer.Controls.Add(ctrl);
        Mayvien_PopupSampleDetails details = (Mayvien_PopupSampleDetails)ctrl;
      
        int position = elementID.IndexOf("#@#");
        string type = elementID.Substring(0, position);
        string id = elementID.Substring(position + 3, elementID.Length - (type.Length + 3));
        details.Type = type;
        details.SampleID = id;
    }
      
      
      
    protected void RadListBox1_ItemDataBound(object sender, Telerik.Web.UI.RadListBoxItemEventArgs e)
    {
        for (int i = 1; i <= 5; i++)
        {
            string imageFieldName = "SampleImage" + i;
            Control SampleImage = e.Item.FindControl(imageFieldName);
            if (!Object.Equals(SampleImage, null))
            {
                if (!SampleImage.Visible)
                    break;
      
                if (!Object.Equals(RadToolTipManager1, null))
                {
                    // add to tooltip manager
                    System.Web.UI.WebControls.Image image = (System.Web.UI.WebControls.Image)SampleImage;
                    string sample_id = image.AlternateText;
                    RadToolTipManager1.TargetControls.Add(image.ClientID, sample_id, true);
                }
            }
        }
    }

            
    <telerik:RadListBox ID="RadListBox1" runat="server" Height="700" Width="100%" EnableLoadOnDemand="true" SelectionMode="Multiple" LoadingPanelID="LoadingPanel1" OnItemDataBound="RadListBox1_ItemDataBound" OnItemCommand="RadListBox1_ItemCommand">
        <ItemTemplate>
            <asp:HiddenField ID="hiddenSampleSetId" runat="server" Value='<%# Eval("sample_set_id") %>' />
            <asp:HiddenField ID="hiddenLookbookId" runat="server" Value='<%# Eval("lookbook_id") %>' />
            <asp:Literal ID="headerLiteral" Text='<%# Eval("header")%>' runat="server" /><br />
            <asp:Panel ID="pnlImages" style="float: left; padding:5px; width:100%;" runat="server">
                <table>
                    <tr>
                        <td valign="top">
                            <asp:Image ID="SampleImage1" runat="server" BorderWidth="1" BorderStyle="Solid" ImageUrl='<%# Eval("image1") %>' Visible='<%# Eval("image1_visible") %>' style="max-width:100px;" AlternateText='<%# Eval("image1_alt") %>' />
                        </td>
                        <td valign="top">
                            <asp:Image ID="SampleImage2" runat="server" BorderWidth="1" BorderStyle="Solid" ImageUrl='<%# Eval("image2") %>' Visible='<%# Eval("image2_visible") %>' style="max-width:100px;" AlternateText='<%# Eval("image2_alt") %>' />
                        </td>
                        <td valign="top">
                            <asp:Image ID="SampleImage3" runat="server" BorderWidth="1" BorderStyle="Solid" ImageUrl='<%# Eval("image3") %>' Visible='<%# Eval("image3_visible") %>' style="max-width:100px;" AlternateText='<%# Eval("image3_alt") %>' />
                        </td>
                        <td valign="top">
                            <asp:Image ID="SampleImage4" runat="server" BorderWidth="1" BorderStyle="Solid" ImageUrl='<%# Eval("image4") %>' Visible='<%# Eval("image4_visible") %>' style="max-width:100px;" AlternateText='<%# Eval("image4_alt") %>' />
                        </td>
                        <td valign="top">
                            <asp:Image ID="SampleImage5" runat="server" BorderWidth="1" BorderStyle="Solid" ImageUrl='<%# Eval("image5") %>' Visible='<%# Eval("image5_visible") %>' style="max-width:100px;" AlternateText='<%# Eval("image5_alt") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td valign="bottom" align="right" colspan="5">
                            <%# Eval("extra_text") %>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </ItemTemplate>
        <Items>
        </Items>
    </telerik:RadListBox>

  2. William
    William avatar
    9 posts
    Member since:
    Oct 2010

    Posted 27 Oct 2011 Link to this post

    No one can help me? Thanks...
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 27 Oct 2011 Link to this post

    Hi William,

    Please note that the forums are community content and that we do not guarantee a response there.

    Now, about the issue you are experiencing - when using the LOD feature of the RadListBox it performs a callback as explained in this article. A Callback means that nothing else on the page is updated and thus changes to the tooltip manager cannot be transfered to the client.

    What I can advise is that you utilize the client-side API of the RadToolTipManager as shown in this online demo. It shows that a client-side event handler is added to the elements you want tooltipified and it causes the manager to create a tooltip. Please try this approach and let me know if it works for you.


    Best wishes,
    Marin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. William
    William avatar
    9 posts
    Member since:
    Oct 2010

    Posted 27 Oct 2011 Link to this post

    Hi Marin,
    Thanks for your suggestion. I finally got the tooltip to work by doing it on the client side with javascript.
Back to Top