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

Tooltips not working for RadListBox with EnableLoadOnDemand=true

3 Answers 118 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
William
Top achievements
Rank 1
William asked on 25 Oct 2011, 05:54 PM
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>

3 Answers, 1 is accepted

Sort by
0
William
Top achievements
Rank 1
answered on 27 Oct 2011, 02:24 PM
No one can help me? Thanks...
0
Marin Bratanov
Telerik team
answered on 27 Oct 2011, 04:22 PM
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
0
William
Top achievements
Rank 1
answered on 27 Oct 2011, 09:27 PM
Hi Marin,
Thanks for your suggestion. I finally got the tooltip to work by doing it on the client side with javascript.
Tags
ToolTip
Asked by
William
Top achievements
Rank 1
Answers by
William
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or