Tooltips in Radlistbox that refreshes on a Timer

[Alex]

I have a RadListBox that has items which are wiped and binded every 4 seconds. I have a linkbutton in each listbox item that I want to open a tooltip. At the moment I use a RadToolTipManager, the content in an ASCX file, and an OnAjaxUpdate function. This -sort of- works but the content in the tooltip is broken when the radlistbox refreshes on the timer.

Realistically I'll only ever have one RadToolTip open at once, and the content it loads (four linkbuttons) won't be changing. I have tried other methods like putting a RadToolTip directly into the listboxes ItemTemplate, but then the tooltip closes itself every time the listbox refreshes/posts-back. I'd love to avoid the whole ToolTipManager + ASCX thing because it loads goofy and shows a loading panel every time it opens.

[Marin Bratanov]

Hello Alex,

When you change (dispose and then re-add) targets for a tooltip so often, it should be expected to have issues with that. RadToolTips heavily rely on their context (i.e., their target) and removing it leaves them in a state where they do not know where they should show up, when to hide, etc., because the event handlers they attach to the DOM object of the HTML element are disposed by the AJAX call.

If you put the tooltips inside the listbox they should be expected to dispose with the AJAX request as well.

If the information you want to show is static, you can consider showing the desired content in a RadWindow when these buttons are clicked.

An alternative is to have a tooltip that targets the listbox wrapper that does not get disposed with AJAX and show it programmatically when the buttons are clicked: http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx.

Regards,

Marin Bratanov
Telerik

 

 

[Alex]

Here is my listbox:

<telerik:RadListBox ID="lstConversations" runat="server" Width="100%" Height="100%" AutoPostBack="true" EnableEmbeddedSkins="false">
                            <ItemTemplate>
                                <div class="Conversation_Container">
                                    <div class="Conversation_Info">
                                        <div class="Conversation_Name"><%# Eval("Name")%></div>
                                        <div class="Conversation_Phone"><%# Eval("Phone")%></div>
                                    </div>
                                    <div class="UnreadCount" id="divUnreadCount" runat="server" visible='<%# Eval("UnreadVisible") %>'>
                                        <div class="UnreadCount_Icon">
                                            <div class="UnreadCount_Text"><%# Eval("UnreadCount")%></div>
                                        </div>
                                    </div>
                                    <div class="Conversation_DropDown">
                                        <asp:LinkButton ID="cmdConvMenu" runat="server">
                                            <img src="images_zw/MenuArrow_Dark.png" alt="Conversation Menu" />
                                        </asp:LinkButton>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </telerik:RadListBox>

 

I want the LinkButton "cmdConvMenu" to open a RadToolTip (relative to which listitem's cmdConvMenu was clicked on), while lstConversations is refreshed on a timer. I can't use a radwindow as I need it to be in the style and function of a tooltip. My other issue is I need these tooltips to contain linkbuttons that open radwindows. The tooltip will work and display fine even through lstConversations updating, but it's linkbuttons won't post back.

I thought maybe I could have one single tooltip on my page and then tell it where to open client-side (over whichever element I clicked), but I'm not sure how to get that working.

[Marin Bratanov]

Hi Alex,

As I already explained, if that listbox disposes every 4 seconds, you can't reliably get a tooltip on its items. Its target will dispose and it will lose its context.

The best suggestion I can offer at the moment is using an OnClientClick handler and opening a tooltip dynamically: http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx.

In such a case the tooltips will not live inside the listbox, so they will not dispose with each psotback, so if you do not get a request conflict (i.e., a request being initiated before the previous one finishes), the link buttons should be able to perform a postback. Nevertheless, I would advise opening the RadWindows with JS only, without that additional postback.

Another possible approach is to use a single RadToolTip's client-side API: http://www.telerik.com/help/aspnet-ajax/tooltip-client-side-radtooltip.html. You can use the set_targetControl() method then call a show() with a small timeout and it should appear next to your button. Then you would need to make sure its data is properly populated because it does not offer an automatic load-on-demand mechanism like RadTooltipManager.

Regards,

Marin Bratanov
Telerik