Tooltip not clearing, and now firing errors (invladid JSON primitive, already assigned to other control...)

[Robert Helm]

I have a page with 2 Radschedulers, 2 Radgrids, and various labels and links, all contained within a RadAjaxPanel. I'm using the RadTooltipManager for items in each of the grids, and some links outside the grids and schedulers. Everything works fine except when the grid is sorted or refreshed (via a dropdownlist), the tooltips keep the old values. I've cleared the RadTooltipManager TargetControls all over the place, but it still doesn't work. I've tried using multiple RadTooltipManagers or just one. Stepping through the code, it looks fine, like the correct values get added, but when it fires, it's the old data.

I wasn't using a RadAjaxManager at all, so I added that in. It worked, but now I get various errors when firing the other tooltips outside the grid(s). Sometimes it's the "invalid JSON primitive" error, and other times in my testing different things, it's the "already associated with another control" error, depending on how many RadTooltipManagers  I use.

Below is a skeleton of the setup...

<telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Position="BottomRight"
    Animation="None" ShowEvent="OnMouseOver" ShowCallout="true" RelativeTo="Element"
    MouseTrailing="False" Width="370px" HideEvent="LeaveToolTip" Skin="Outlook" OnAjaxUpdate="OnAjaxUpdate"
    BackColor="Red">
</telerik:RadToolTipManager>
<telerik:RadToolTipManager runat="server" ID="RadToolTipManager2" Position="BottomRight"
    Animation="None" ShowEvent="OnMouseOver" ShowCallout="true" RelativeTo="Element"
    MouseTrailing="False" Width="370px" HideEvent="LeaveToolTip" Skin="Outlook" OnAjaxUpdate="OnAjaxUpdate"
    BackColor="Red">
</telerik:RadToolTipManager>
<telerik:RadToolTipManager runat="server" ID="RadToolTipManager3" Position="BottomRight"
    Animation="None" ShowEvent="OnMouseOver" ShowCallout="true" RelativeTo="Element"
    MouseTrailing="False" Width="370px" HideEvent="LeaveToolTip" Skin="Outlook" OnAjaxUpdate="OnAjaxUpdate"
    BackColor="Red">
</telerik:RadToolTipManager>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">
    <table width="100%">
    ...
        <asp:HyperLink ID="lblNameWithTooltip" runat="server" />
    ...
        <asp:HyperLink ID="lblName2WithTooltip" runat="server" />
    ...
        <asp:DropDownList ID="DropDownList1"...>
    ...
        <telerik:RadGrid ID="RadGrid1"...>
            <Columns>
                <telerik:GridTemplateColumn>
                    <ItemTemplate>
                        <asp:HyperLink ID="lnkWithTooltip" runat="server" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </telerik:RadGrid>
    ...
        <telerik:RadGrid ID="RadGrid2"...>
            <Columns>
                <telerik:GridTemplateColumn>
                    <ItemTemplate>
                        <asp:HyperLink ID="lnkWithTooltip" runat="server" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </telerik:RadGrid>
    ...
        <telerik:RadScheduler ID="RadScheduler1"...>
    ...
        <telerik:RadScheduler ID="RadScheduler2"...>
    ...
    </table>
</telerik:RadAjaxPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                <telerik:AjaxUpdatedControl ControlID="RadToolTipManager3" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="DropDownList1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="DropDownList1" />
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                <telerik:AjaxUpdatedControl ControlID="RadToolTipManager3" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Again, I'm clearing the TargetControls in the code behind and assigning the tooltips as well. All that seems to be working fine.

In summary, everything was fine without using the RadAjaxManager except the grid tooltips wouldn't reset on refresh or sort.
Once I added the RadAjaxManager, that worked, but now I get errors firing the other tooltips on the page, regardless of using the same RadTooltipManager or different one.

Hopefully that's enough info. Thanks for any info.

[Marin Bratanov]

Hello Robert,

It seems that you have nested several update panels within each other when you added the RadAjaxManager. This is usually a scenario to be avoided (not only with the RadControls, but generally when using AJAX), because it often results in similar problems.

What I can suggest is that you remove the RadAjaxManager and simply place the tooltip managers inside the RadAjaxPanel. Judging from your snippets the postbacks from the grids (upon sorting for example) are trapped in an AJAX request that updates the RadAjaxPanel1 only, so the tooltip managers do not receive the new data (i.e. the new Value property each target has).

If these controls are the bigger part of the page it is possible that removing AJAX entirely can yield better performance, as having the entire page in an update panel (or RadAjaxPanel) may actually slow things down, because instead of the standard browser rendering engine JavaScript is used for AJAX, which is slower.


Regards,
Marin Bratanov
the Telerik team

[Robert Helm]

Thanks for the suggestion, Marin. I moved the three RadTooltipManagers into the RadAjaxPanel and removed the RadAjaxManager. At first, all the tooltips showed OK, but when I moved to another tooltip outside that grid,I got errors again.   

Now, originally, I didn't have a RadAjaxManager, but my RadToolTipManagers were outside the RadAjaxPanel. Everything worked (no errors) but the tooltips wouldn't reset on grid sorting or refreshing.
......
OK, I've simplified things. I now have only 1 RadTooltipMananger and it is inside the RadAjaxPanel. Everything seems to work OK until I refresh the grid with a DropDownList_SelectedIndexChanged event. Then when I fire the tooltip I get this error:

"Microsoft JScript runtime error: Sys.InvalidOperationException: Two components with the same id 'ctl00_ctl00_contentMain_contentMain_ctl09_grdInfo' can't be added to the application."

Where grdInfo is the grid of the user control that displays as the tooltip.

UPDATE...

I've noticed that I only get the " Two components with the same id..." error when the grid refreshes with LESS records than before the refresh. If the drop down triggers a grid refresh with the same or more records, I have no errors.


Any idea? Thanks for any info.

[Robert Helm]

I think that Marin's suggestion to "place the tooltip managers inside the RadAjaxPanel" did the trick. I pared the code down to use only 1 RadTooltipManager and moved it into the RadAjaxPanel. I noticed in Firefox that it still tosses an error when I refresh the grid with less than the original number or rows in the grid and then try to fire the tooltip, but the error is ignored (by IE and Chrome as well as Firefox) and the tooltip fires correctly. If I'm running local in debug mode, the error obviously stops the code, but hitting continue everything works correctly.

Not a perfect solution since the error still fires, but at least the data is correct and the browsers do ignore the error.

Thanks for the suggestion.