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

Tooltip inside a custom templated control, which itself is inside an UpdatePanel

2 Answers 44 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Jérémie
Top achievements
Rank 1
Jérémie asked on 11 May 2013, 11:25 AM
Hello,

I have a templated server control, which is placed inside an ASP:UpdatePanel.
Inside this templated server control, I have placed a label/RadTooltip combination.

        <asp:UpdatePanel ID="pnl1" runat="server" UpdateMode="Conditional" >
            <ContentTemplate>

                <cc1:TemplatedControl ID="TemplatedControl1" runat="server">
                    <ContentTemplate>
           
                        <asp:Label runat="server" ID="Label1" Text="Click here for the toolip (Inside Custom Template, Inside UpdatePanel)" />
                                
                        <telerik:RadToolTip ID="RadToolTip2" TargetControlID="Label1" runat="server">
                            <asp:Label ID="lblContent02" runat="server" Text="Test Tooltip inside Template" />
                       </telerik:RadToolTip>
            
                    </ContentTemplate>
                </cc1:TemplatedControl>
    
            </ContentTemplate>
        </asp:UpdatePanel>

The complete source code can be downloaded here (I was not allowed to attach a zip file):
http://dl.free.fr/v2CyhZhMQ
This is a very simple project which I created only to demonstrate the issue.

Now the issue appears after a partial postback. The Tooltip behaviour is lost after the ASP:UpdatePanel is refreshed.
I cannot figure out how I should modify my templated control so that the toolip behavior is kept. (In practise, the JS line $create(Telerik.Web.UI.RadToolTip, .... is not called, and I guess the JQuery object is not created).

- If the tooltip is outside of any templated control, it works fine
- If the tooltip is inside an UpdatePanel, it works fine, even after postback
- If the tooltip is inside a custom templated control, it works fine

So it is somehow the conjunction of both the templated server control and the updatepoanel which makes the RadTooltip go crazy.

I someone could take a quick look at this source code and tell me what I did wrong, I would be very grateful.
If I should submit the source by somne other mean, please tell me how to do so.

Best Regards,

Jérémie

2 Answers, 1 is accepted

Sort by
0
Jérémie
Top achievements
Rank 1
answered on 14 May 2013, 04:45 AM
Hello again,

After quick investigation, it appears the problem happens for all telerik controls. After partial postback, if the control is inside a templated control, the "$Create(..." javascript lines are not executed.

Is there any way I can generate these scripts upon partial postback ?
0
Marin Bratanov
Telerik team
answered on 15 May 2013, 10:49 AM
Hello Jérémie,

There is already an answer to your support ticket on the matter and I am pasting the information here as a reference as well. On the matter of manually constructing the $create() statement - this is not possible and should be done by the framework.


Indeed there is a problem with the provided configuration. However it is not related with RadControls for ASP.NET AJAX, but with the Microsoft ASP.NET AJAX implementation. The problem occurs regardless of what asp.net ajax control you add to the content template of the custom user control.

Here is one suggestion of how you can achieve the desired configuration by using RadAjaxManager provided by telerik.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TelerikTemplate._Default" %>
<%@ Register Assembly="TelerikTemplate" Namespace="TelerikTemplate" TagPrefix="cc1" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadAjaxManager runat="server" ID="AjaxManager1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnCallback">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnl1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div>
        <!-- This label/Tooltip pair is outside of all other controls and works perfectly -->
        <asp:Label runat="server" ID="lblTest" Text="Click here for the toolip (Normal)" />
        <telerik:RadToolTip ID="RadToolTip1" TargetControlID="lblTest" runat="server"
            Position="MiddleRight" HideEvent="ManualClose"  RelativeTo="Element" ShowDelay="0" IsClientID="false"
            EnableShadow="true" HideDelay="0" ShowEvent="OnClick" RegisterWithScriptManager="true">
                Test Tooltip
        </telerik:RadToolTip>
  
        <asp:Panel runat="server" ID="pnl1">
                <!-- This label/Tooltip pair is inside the updatepanel and works perfectly -->
  
                <asp:Label runat="server" ID="Label2" Text="Click here for the toolip (Inside UpdatePanel)" />
                <telerik:RadToolTip ID="RadToolTip3" TargetControlID="Label2" runat="server"
                    Position="MiddleRight" HideEvent="ManualClose"  RelativeTo="Element" ShowDelay="0" IsClientID="false"
                    EnableShadow="true" HideDelay="0" ShowEvent="OnClick" RegisterWithScriptManager="true">
                     <asp:Label ID="lblContent01" runat="server" Text="Test Tooltip inside UpdatePanel" />
                </telerik:RadToolTip>
  
                <cc1:TemplatedControl ID="TemplatedControl1" runat="server">
                    <ContentTemplate>
              
                        <!-- This label/Tooltip pair is inside the templated server control, but does not work after callback -->
                        <asp:Label runat="server" ID="Label1" Text="Click here for the toolip (Inside Custom Template, Inside UpdatePanel)" />
                        <telerik:RadButton ID="bution1" runat="server" AutoPostBack="false" OnClientClicking="function(){alert(1);}"></telerik:RadButton>
                        <telerik:RadToolTip ID="RadToolTip2" TargetControlID="Label1" runat="server"
                            Position="MiddleRight" HideEvent="ManualClose"  RelativeTo="Element" ShowDelay="0" IsClientID="false"
                            EnableShadow="true" HideDelay="0" ShowEvent="OnClick" RegisterWithScriptManager="true">
                            <asp:Label ID="lblContent02" runat="server" Text="Test Tooltip inside Template" />
  
                       </telerik:RadToolTip>
              
                    </ContentTemplate>
                </cc1:TemplatedControl>
                </asp:Panel>
        <br />
        <asp:Button ID="btnCallback" runat="server" text="CallBack"/>
    </div>
    </form>
</body>
</html>



Regards,
Marin Bratanov
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.
Tags
ToolTip
Asked by
Jérémie
Top achievements
Rank 1
Answers by
Jérémie
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or