Show AjaxLoading panel on tabclick

[Prava kafle]

Hi,

How can I show Ajaxloading panel on tabclick.? I am setting the  content  url of of each page view  on tabclick event and its takes around 1 minute to render it.
Any idea?

Thanks
Prava

[Veronica]

Hi Prava kafle,

You should define RadTabStrip as an AJAX initiator with the updated controls being the RadMultiPage and the RadTabStrip itself. Please note that RadTabStrip should have AutoPostBack set to "true":

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

Hope this helps.

Regards,
Veronica Milcheva
the Telerik team

[Prava kafle]

Hi Veronica,

I implemented your suggestion , listed below is my markup and code. I see two loading panels on first  tab click  event after that no matter which tab you click , loading panel  never appears.

Markup

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

            <Scripts>

                <%--Needed for JavaScript IntelliSense in VS2010--%>

                <%--For VS2008 replace RadScriptManager with ScriptManager--%>

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

            </Scripts>

     </telerik:RadScriptManager>

     <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"   >

    </telerik:RadAjaxLoadingPanel>

     

     <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">

        <AjaxSettings>

            <telerik:AjaxSetting AjaxControlID="RadTabStrip1" >

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" LoadingPanelID="RadAjaxLoadingPanel1"/>

                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1"/>

                </UpdatedControls>

            </telerik:AjaxSetting>

        </AjaxSettings>

    </telerik:RadAjaxManager>

 

     

    

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server"  Width="100%"  Height="100%"  AutoPostBack="true"   

        Skin="WebBlue" MultiPageID="RadMultiPage1" ontabclick="RadTabStrip1_TabClick"   >  

        <Tabs> 

            <telerik:RadTab runat="server" Selected="True"  Text="Gmail"      >  

            </telerik:RadTab> 

            <telerik:RadTab runat="server" Text="hotmail"  >  

            </telerik:RadTab> 

            <telerik:RadTab runat="server" Text="facebook"   >  

            </telerik:RadTab> 

       

        </Tabs> 

    </telerik:RadTabStrip> 

    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" BorderColor="Black"  BorderWidth="1px"  style="margin-top:-1px;"  RenderSelectedPageOnly="true"   >  

        <telerik:RadPageView ID="gmail" runat="server" Width="100%" Height="657px"  >

        </telerik:RadPageView>       

        <telerik:RadPageView ID="hotmail"  runat="server" Width="100%" Height="655" ></telerik:RadPageView>

        <telerik:RadPageView ID="facebook"  runat="server" Width="100%" Height="655" >

        </telerik:RadPageView>

             

   </telerik:RadMultiPage

protected void Page_Load(object sender, EventArgs e)

       {

           if(!IsPostBack)

           {

               RadTabStrip1.SelectedIndex =0;

               RadTabStrip1.Tabs[0].PageViewID = "gmail";

               RadMultiPage1.SelectedIndex = 0;

               RadMultiPage1.PageViews[0].ContentUrl ="http://www.gmail.com";

           }

 

       }

 

 

       protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)

       {

          int currentTabIndex = RadTabStrip1.SelectedIndex;

          e.Tab.PageView.Selected = true;

 

 

          switch (currentTabIndex)

          {

              case 0:

                  RadMultiPage1.PageViews[0].ContentUrl = "http://www.hotmail.com";

                  RadTabStrip1.Tabs[0].PageViewID = "hotmail";

 

                  break;

              case 1:

                  RadMultiPage1.PageViews[1].ContentUrl = "http://www.gmail.com";

                  RadTabStrip1.Tabs[1].PageViewID = "gmail";

                  break;

              case 2:

                  RadMultiPage1.PageViews[1].ContentUrl = "http://www.facebook.com";

                  RadTabStrip1.Tabs[1].PageViewID = "facebook";

                  break;

              

              default:

                  RadMultiPage1.PageViews[0].ContentUrl = "http://www.gmail.com";

                  RadTabStrip1.Tabs[0].PageViewID = "gmail";

 

                  break;

          }

      


Thanks,
Prava

[Veronica]

Hello Prava kafle,

I'll need further investigation on the issue. Basically it must be similar to this KB article.
I'll contact you as soon as I find a solution.
Thank you for your patience.

Kind regards,
Veronica Milcheva
the Telerik team

[Veronica]

Hello Prava kafle,

Please take a look at this Code Library for solution.

Regards,
Veronica Milcheva
the Telerik team