RadToolTip TargetControlID Property Seemingly Incorrect after UpdatePanel.Update

[mc2000]

I've been able to track down my problem to a very specific scenario, one to which I hope there is an easy solution. I have a page with a single update panel (had to use the ASP.NET one due to conditional updating) which contains a "Show ToolTip" link only and a single ToolTip with an update panel and a close button. That simple. When I click on the link "Show ToolTip" the tooltip pops up just fine. When I click on the "Close ToolTip" button inside the tooltip it closes just fine. The close button fires a JavaScript method to close the tooltip and then updates the update panel contents. When I click on the "Show ToolTip" link again (A SECOND TIME), the screen goes modal (like it will load the tooltip) but shows no tooltip. I believe it is a problem with the target control id because if I set the target control id to blank and center the tooltip it comes up. This is not the behavior we want to exhibit in our application, though. Lastly, the target control must be variable because we have this tooltip popping up in a repeater.

The page code:

<form id="form1" runat="server">
<asp:scriptmanager runat="server"></asp:scriptmanager>

<telerik:RadToolTip ID="EditActivityModalToolTip" ClientIDMode="Static" Modal="true" runat="server" IsClientID="true" Skin="Telerik"
    ShowEvent="FromCode" HideEvent="FromCode" EnableViewState="True" EnableShadow="true" Position="MiddleRight"
    OnClientBeforeHide="EditActivityTooltipOnClientBeforeHide">
    <asp:UpdatePanel ID="ToolTipUpdatePanel" runat="server">
    <ContentTemplate>
        <asp:Button ID="CloseButton" OnClick="CloseButton_CloseClicked" runat="server" Text="Button" />
    </ContentTemplate>
    </asp:UpdatePanel>
</telerik:RadToolTip>
<div>
    <asp:UpdatePanel ID="MainUpdatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <a id="SampleLink" onclick="javascript:ShowEditActivityToolTip('SampleLink', 'EditActivityModalToolTip')";>Show ToolTip</a>

    </ContentTemplate>
    </asp:UpdatePanel>
</div>
</form>

The JavaScript method(s):

<script type="text/javascript">
    var toHideEditActivityToolTip;

    function EditActivityTooltipOnClientBeforeHide(sender, args) {
        if (!toHideEditActivityToolTip) args.set_cancel(true);
    }

    function HideEditActivityToolTip(toolTipClientId) {
        toHideEditActivityToolTip = true;
        var radToolTip = $find(toolTipClientId);
        radToolTip.hide();
    }

    function ShowEditActivityToolTip(sender, toolTipClientId) {
        toHideEditActivityToolTip = false;
        var radToolTip = $find(toolTipClientId);
        radToolTip.set_targetControlID(sender);
        radToolTip.show();
    }

    function OnClientBeforeShow(sender, args) {
        sender._popupBehavior.set_keepInScreenBounds(false);
    }
</script>

And lastly, the code behind for the close button:

protected void CloseButton_CloseClicked(object sender, EventArgs e)
{
    ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "HideFilterToolTip", "HideEditActivityToolTip('" + EditActivityModalToolTip.ClientID + "');", true);
    MainUpdatePanel.Update();
}

I also submitted this is a case due to the timeliness of needing an answer but I do sincerely appreciate and look forward to your remarks here. Regards!

[Cori]

Does it work if you place the RadToolTip inside of the UpdatePanel, instead of having the UpdatePanel inside of the RadToolTip? I think that might be the problem.

[mc2000]

That would break my JavaScript as the control is now nested inside of an update panel.

[Svetlina Anati]

Hello guys,

 This problem is already fixed in one of the later releases of RadControls. What we suggest is to upgrade to the latest version of the controls and test again.

Sincerely yours,
Svetlina
the Telerik team

[mc2000]

I've upraded to 2010.2.826.40

The problem appears to be "sort of" fixed. The modal is popping up for me now on the second click, but it targets to the edge of the screen versus the element itself. So the first time it comes up, it pops out from the link, the second time it comes up it anchors to the side of the screen. I even tried setting the relativeto property to element. If I have two links in the update panel and I switch from link to link it always comes up at the right place. It appears to be losing the target control. Thanks!

[Svetlina Anati]

Hi mc2000,

 I already answered your support thread and for your convenience and for others who might encounter the same issue I pasted it below:

I reexamined the demo and I was able to reproduce the problem. However, it is not caused by a bug in the tooltip but it is due to the specific setup. What actually happens is that you update the target control but you do not update the tooltip. As a result it holds its old information and thus you should set the new target control as you have done. However, the new ID you supply is the same as the old ID and the setter sets new value and does other actions only if the value is different than the current - this is a standard technique when implementing setters to avoid unnecessary overhead and thus the tooltip still has old information.

What I can suggest is the following:

1) Set the target control ID to an empty string before setting the ID e.g as shown below:

Copy Code

function ShowEditActivityToolTip(sender, toolTipClientId)
{
    toHideEditActivityToolTip = false;
    var radToolTip = $find(toolTipClientId);
    radToolTip.set_targetControlID ("");
    radToolTip.set_targetControlID(sender);
    radToolTip.show();
}

2) Make sure that you update the tooltip when you update the target control.

Kind regards,
Svetlina
the Telerik team

[mc2000]

Fixed it, thanks.