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

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

1 Answer 87 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Christine
Top achievements
Rank 1
Christine asked on 25 Aug 2013, 08:51 PM
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";
    }
}



1 Answer, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 27 Aug 2013, 06:28 AM
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.
Tags
Ajax
Asked by
Christine
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Share this question
or