Tooltips not working for RadListBox with EnableLoadOnDemand=true

[William]

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>



[William]

No one can help me? Thanks...

[Marin Bratanov]

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

[William]

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