[Solved] Nested RadTabStrip Ajax Loading Panel

[Officialboss]

I can't seem to get the loading panel to show when a nested RadTabStrip tab is clicked.
Here is my page, child page of a master that contains the ScriptManager and RadAjaxManager.

<telerik:RadAjaxPanel ID="RadAjaxPanel1MainPage" runat="server" EnableOutsideScripts="false">

    <telerik:RadTabStrip Visible="true" BorderStyle="Solid" BorderColor="black" BorderWidth="0px"
        ID="RadTabStrip1" runat="server" Skin="Outlook" SelectedIndex="0" MultiPageID="multiPage"
        AutoPostBack="True">
        <Tabs>
            <telerik:RadTab Text="Tab1" ID="tab0" runat="server" PageViewID="pv0"></telerik:RadTab>
            <telerik:RadTab Text="Tab2" ID="tab1" runat="server" PageViewID="pv1"></telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>

    <telerik:radmultipage ID="multiPage" selectedindex="0" runat="server" style="float:left" Height="520px" Width="98%"
        RenderSelectedPageOnly="false" BorderStyle="Solid" BorderWidth="1px" BorderColor="#999999" Visible="true"
        ScrollBars="Vertical">
        <telerik:RadPageView ID="pv0" runat="server">
            <asp:Panel ID="Panel1" runat="server" style="padding:3px 1px 2px 3px;">
            </asp:Panel>
        </telerik:RadPageView>
        <telerik:RadPageView ID="pv1" runat="server">
            <asp:Panel ID="Panel2" runat="server" style="padding:3px 1px 2px 3px;"></asp:Panel>
        </telerik:RadPageView>
    </telerik:radmultipage>

    </telerik:RadAjaxPanel>

    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />
    <telerik:radajaxmanagerproxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="multiPage" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                    <telerik:AjaxUpdatedControl ControlID="Panel2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:radajaxmanagerproxy>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="30" BackColor="#E0E0E0">
        <asp:Image ID="Image1" ImageUrl="~/Images/Loading7.gif" BorderWidth="0px" AlternateText="Loading"
        runat="server" Style="margin-top: 45px;" />
    </telerik:RadAjaxLoadingPanel>

On server click of RadTabStrip1 I am dynamically loading the UserControl below into Panel2.
When I click the Tabs of RadTabStrip2 which is loaded dynamically, I don't see the loading panel.

UserControlTab

<telerik:RadTabStrip Visible="true" BorderStyle="Solid" BorderColor="black" BorderWidth="0px"
                ID="RadTabStrip2" runat="server" Skin="Outlook" SelectedIndex="0" MultiPageID="multiPageFinancials"
                AutoPostBack="true">
                <Tabs>
                    <telerik:RadTab ID="tab0" Text="Tab11" runat="server" PageViewID="pv0"></telerik:RadTab>
                    <telerik:RadTab ID="Tab1" Text="Tab22 runat="server" PageViewID="pv1"></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>


        <telerik:radmultipage ID="multiPage2" selectedindex="0" runat="server" style="float:left" ScrollBars="Vertical"
            Height="98%" Width="99%" RenderSelectedPageOnly="false" BorderStyle="Solid" BorderWidth="1px" BorderColor="#999999">
            <telerik:RadPageView ID="pv0" runat="server">
                <asp:Panel ID="Panel1" runat="server" style="padding:3px 1px 2px 3px;">
                    <%--Time 1:
                    <telerik:radcodeblock ID="RadCodeBlock1" runat="server">
                    <%=System.DateTime.Now.ToString() %>
                    </telerik:radcodeblock>--%>
                </asp:Panel>
                <uc1:WebUserControl ID="WebUserControl1" runat="server" />
            </telerik:RadPageView>

            <telerik:RadPageView ID="pv1" runat="server">
                <asp:Panel ID="Panel2" runat="server" style="padding:3px 1px 2px 3px;">
                   <%-- Time 2:
                    <telerik:radcodeblock ID="RadCodeBlock2" runat="server">
                    <%=System.DateTime.Now.ToString() %>
                    </telerik:radcodeblock>--%>
                    <uc2:WebUserControl ID="WebUserControl2" runat="server" />
                </asp:Panel>
            </telerik:RadPageView>
        </telerik:radmultipage>



    <asp:ScriptManagerProxy ID="ScriptManagerProxy13" runat="server" />
    <telerik:radajaxmanagerproxy ID="RadAjaxManagerProxy33" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManagerProxy33">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadTabStrip2"></telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="multiPage2" />
                <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel22" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadTabStrip2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="multiPage2" LoadingPanelID="RadAjaxLoadingPanel22" />
                <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel22" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    </telerik:radajaxmanagerproxy>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel22" runat="server" Transparency="30" BackColor="#E0E0E0">
    <asp:Image ID="Image1" ImageUrl="~/Images/Loading7.gif" BorderWidth="0px" AlternateText="Loading"
    runat="server" Style="margin-top: 45px;" />
</telerik:RadAjaxLoadingPanel>

UserControlTab.ascx.cs

    #region Web Form Designer generated code
    override protected void OnInit(EventArgs e)
    {
        //
        // CODEGEN: This call is required by the ASP.NET Web Form Designer.
        //
        InitializeComponent();
        base.OnInit(e);
    }

    /// <summary>
    /// Required method for Designer support - do not modify
    /// the contents of this method with the code editor.
    /// </summary>
    private void InitializeComponent()
    {
        // Tabs
        this.RadTabStrip2.TabClick += new Telerik.Web.UI.RadTabStripEventHandler(this.RadTabStrip2_Click);

        RadAjaxManagerProxy33.AjaxSettings.AddAjaxSetting(RadTabStrip2, multiPage2, RadAjaxLoadingPanel22);
    }

    #endregion

    private void RadTabStrip2_Click(object sender, Telerik.Web.UI.RadTabStripEventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
    }

Could some please tell me what is wrong and how I can display the loading panel of a nested Tab.
Thanks

[Steve]

Hello Howard,

As discussed many times in the forums and noted in our help documentation here, you should not mess RadAjaxPanel and RadAjaxManager on the same page with the same controls. Please remove the AjaxPanel and use only the AjaxManager for handling the page ajaxification.

Regards,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center