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

3 posts, 0 answers
  1. Jérémie
    Jérémie avatar
    2 posts
    Member since:
    May 2013

    Posted 11 May 2013 Link to this post

    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. Jérémie
    Jérémie avatar
    2 posts
    Member since:
    May 2013

    Posted 13 May 2013 Link to this post

    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 ?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 15 May 2013 Link to this post

    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.
Back to Top