Multiple User controls in Tab strip with RadAjaxLoading panel only shows on first tab

2 posts, 0 answers
  1. Christine
    Christine avatar
    1 posts
    Member since:
    May 2013

    Posted 25 Aug 2013 Link to this post

    Hi,

    I have setup some very simple code to show my issue.  I have my Test.aspx page, which has a RadAjaxManager, along with a tab strip.  Each tab contains a user control.  The user control is very simple, a textbox and a button.  When clicked, the button just hits its click event on the server and for demonstration will wait 2 seconds.  The ajax manager has the event of the btnTest Click and the updated controls are both the panels wrapping each user control.  The issue is, the loading panel only shows when I am on the first tab and click the button.  It will not show on the second tab when I click the button. Any help is appreciated.  Below is the code:

    <%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
     
    <%@ Register Src="~/Controls/Test.ascx" TagPrefix="uc" TagName="test" %>
     
    <html>
    <head>
       
    </head>
    <body>
        <form runat="server">
             <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
     
        <telerik:RadAjaxManager ID="radAjax" runat="server" >
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnTest" EventName="Click">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlTest1" LoadingPanelID="RadLoadingPanel" />
                        <telerik:AjaxUpdatedControl ControlID="pnlTest2" LoadingPanelID="RadLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadLoadingPanel" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadTabStrip ID="monetizeTabs" runat="server" MultiPageID="RadMultiPage1"
            SelectedIndex="0" CssClass="MainTabStrip" OnTabClick="RadTabStrip1_TabClick">
            <Tabs>
                <telerik:RadTab Text="Test 1" Font-Size="12pt">
                </telerik:RadTab>
                <telerik:RadTab Text="Test 2" Font-Size="12pt">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="pageView">
            <telerik:RadPageView ID="RadPageView1" runat="server" CssClass="tabContent">
                <asp:Panel ID="pnlTest1" runat="server">
                    <uc:test ID="test1" runat="server" ValidationGroup="Hi" />
     
                </asp:Panel>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server" CssClass="tabContent">
                <asp:Panel ID="pnlTest2" runat="server">
                    <uc:test ID="test2" runat="server" ValidationGroup="Bye" />
                </asp:Panel>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
                </form>
    </body>
     
    </html>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
        protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
        {
            
        }
    }

    Here is the user control code:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Test.ascx.cs" Inherits="controls_Test" %>
    <div style="padding:10px;border:solid 1px black;margin:10px;">
    <asp:TextBox ID="txtName" runat="server" ></asp:TextBox>  
    <asp:Button ID="btnTest" runat="server" OnClick="btnTest_click" Text="Test it"  /></div>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class controls_Test : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
     
        protected void btnTest_click(object sender, EventArgs e)
        {
            Thread.Sleep(2000);
            txtName.Text = "Back from Server";
        }
    }



  2.
  3. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 Aug 2013 Link to this post

    Hi Christine,

    Please have a look at the following code snippet.

    ASPX:
    <telerik:RadAjaxManager ID="radAjax" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadMultiPage1" EventName="Click">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlTest1" LoadingPanelID="RadLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="pnlTest2" LoadingPanelID="RadLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadLoadingPanel" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadTabStrip ID="monetizeTabs" runat="server" MultiPageID="RadMultiPage1"
        SelectedIndex="0" CssClass="MainTabStrip" OnTabClick="RadTabStrip1_TabClick">
        <Tabs>
            <telerik:RadTab Text="Test 1" Font-Size="12pt">
            </telerik:RadTab>
            <telerik:RadTab Text="Test 2" Font-Size="12pt">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="pageView">
        <telerik:RadPageView ID="RadPageView1" runat="server" CssClass="tabContent">
            <asp:Panel ID="pnlTest1" runat="server">
                <uc1:WebUserControl ID="WebUserControl1" runat="server" />
            </asp:Panel>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView2" runat="server" CssClass="tabContent">
            <asp:Panel ID="pnlTest2" runat="server">
                <uc1:WebUserControl ID="WebUserControl2" runat="server" />
            </asp:Panel>
        </telerik:RadPageView>
    </telerik:RadMultiPage>
     
    Thanks,
    Shinu.
Back to Top