Loading is too slow if tabstrip's AutoPostBack is true

17 posts, 0 answers
  1. Semih
    Semih avatar
    6 posts
    Member since:
    Feb 2009

    Posted 19 Mar 2009 Link to this post

    Hi,

    We are currently having performance problem on the TabStrip when the AutoPostBack property is set to "True" even there is no server side event attached. It takes about 3 seconds to show the newly selected tab. There is no problem if AutoPostBack property is set to "False".

    Is there any workaround ?

    Regards,

    Semih
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 19 Mar 2009 Link to this post

    Hello Semih,

    RadTabStrip would postback if the AutoPostBack property is set to true. Consider using ajax to ajaxify the postback.

    Greetings,
    Albert
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Semih
    Semih avatar
    6 posts
    Member since:
    Feb 2009

    Posted 20 Mar 2009 Link to this post

    Hi Albert,

    Thanks for your interest, I've removed the autopostback property from the code. And assigned an on_tab_click event to the tabstrip control, even though there is no code in this event we still have the slowness problem.

    Before using RadTabStrip we were using AjaxControlToolkit's tabcontainer, for some reasons we've quit using that and started using RadControls. There were no slowness in that control but some another buggy behaviours, but now we are facing slowness problem on RadTabStrip.

    Any further help would be appreciated...

    Semih
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 20 Mar 2009 Link to this post

    Hello Semih,

    Did you try ajaxify-ing the tabstrip? Subscribing to the TabClick event is equal to setting the AutoPostBack property to true. Why do you need the postback at all?

    Regards,
    Albert
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Semih
    Semih avatar
    6 posts
    Member since:
    Feb 2009

    Posted 20 Mar 2009 Link to this post

    Hello Albert,

    I just need a Tab_Changed like event. I'm doing some business operations on the tab_changed event.


  7. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 20 Mar 2009 Link to this post

    Hello Semih,

    Clicking a tab is causing postback in your case which in turn is creating the delay. I recommend you use RadAjaxPanel or RadAjaxManager to ajaxify the tabstrip. If you choose to use RadAjaxPanel simply put your tabstrip and multipage inside a <telerik:RadAjaxPanel> tag:

    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
         <telerik:RadTabStrip />
         <telerik:RadMultiPage />
    </telerik:RadAjaxPanel>

    If you decide to use RadAjaxManager configure it like this:

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

    I hope this helps,
    Albert
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8. Semih
    Semih avatar
    6 posts
    Member since:
    Feb 2009

    Posted 20 Mar 2009 Link to this post

    Hi again Albert,

    I've tried your suggestions. Here is how it went:

    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
         <telerik:RadTabStrip />
         <telerik:RadMultiPage />
    </telerik:RadAjaxPanel>

    didn't make any difference in the performance when changing the tab.
    Then I've tried RadAjaxManager, and I'm having an error.

    The error is: Microsoft JScript runtime error: Sys.InvalidOperationException: A control is already associated with the element.
    I've gone through some threads in the forum about this error but couldn't resolve my problem..

    I hope you have some suggestions..

    Here is my aspx code:

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

                    <AjaxSettings>

                        <telerik:AjaxSetting AjaxControlID="ccTab"> 

                            <UpdatedControls>

                                <telerik:AjaxUpdatedControl ControlID="ccTab" /> 

                                <telerik:AjaxUpdatedControl ControlID="multipage" /> 

                            </UpdatedControls>

                        </telerik:AjaxSetting>

                    </AjaxSettings>

                </telerik:RadAjaxManager>

               

               

                             <telerik:RadTabStrip runat="server"  

                                 Skin="Web20" ID="ccTab"

                                  MultiPageID = "multipage"

                                 Width="100%" SelectedIndex="0" ontabclick="Tab_ActiveTabChanged">

                                 ......

                            </telerik:RadTabStrip>

                            <telerik:RadMultiPage Height="350px"  ID="multipage" BackColor="White" runat="server" SelectedIndex="0">

                            <telerik:RadPageView runat="server" BackColor="White" ID="rpv1" Height="350px"     >   

                                 ......

                              </telerik:RadPageView>

                            </telerik:RadMultiPage>






  9. Joe
    Joe avatar
    51 posts
    Member since:
    Oct 2008

    Posted 20 Mar 2009 Link to this post

    I also have the same problem with the tabs being slow to load, each page basically does a full reload..

    I've enabled ajax manager on every page and turned off autopostback on every tab and it's still slow to load.

    Any other suggestions?

    Thanks,
    Joe
  10. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 23 Mar 2009 Link to this post

    Hi guys,

    I think there's some misunderstanding here. It seems you are trying to achieve same performance for client-side and server-side tabs switch. If so, I will have to disappoint you - it's not possible. When you have TabClick event (or AutoPostBack property to true) a request is made to the server, so you'll always get poor performance compared to client-side tab clicks.

    Kind regards,
    Paul
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  11. Joe
    Joe avatar
    51 posts
    Member since:
    Oct 2008

    Posted 23 Mar 2009 Link to this post

    So Paul what is the best way to do this?

    I would prefer using Ajax so as to avoid the full page reload so that it appears seemless to the end user.

    It would be great that they could click on any tab and the page would change without the dreaded 'click" and full page clear and load.

    Thanks,
    Joe
  12. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 23 Mar 2009 Link to this post

    Hello Joe,

    To get the best performance using RadTabStrip/RadMultipage controls we recommend using the approach shown in our Load on Demand RadPageView example. In this case, the content of the first visible pageview is loaded initially. The content of the other pageviews is loaded only when requested via AJAX call. When clicking a tab for second time, its pageview (and the content inside) is already loaded and no request to the server is needed.

    All the best,
    Paul
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  13. Boris
    Boris avatar
    3 posts
    Member since:
    May 2009

    Posted 04 May 2009 Link to this post

    Hello Paul,

    We having the same problem, slow Tabs switching after all Tabs were loaded initially.

    I changed loading approach by adopting Load on Demand RadPageView example. There is no difference except that any page initially loaded on demand. But the issue is ‘after loaded’ behavior. It looks, like with every switch, HTML image being built from scratch instead of displaying HTML page that has been built already (although no events/postbacks can be seen on  server side).

    My question : is there any possibility to display existing page view after switching (like window hide/show) ?  

     

    Our TabStrip solution is not simple, too many controls and TabStrip itself located on teletk pop-up window. When you attempt to move or resize this window, it works tremendously slow, although when you moving IE including both: base and modal pop-up windows – it moves perfectly.

    Any solution there?

     

    Thank you

    Boris

  14. wildyaker
    wildyaker avatar
    9 posts
    Member since:
    Jan 2007

    Posted 23 Jul 2009 Link to this post


    All,
        You may want to consider compressing the Skins that come with the rad controls.  They ship uncompressed which is good for changing but not good for performance.  If you are using custom skins, make sure that you removed all the unused styles as well.  Also make sure that the Orientation property and the Width property is set on the tab control and not in the css.  This will make it so the browser does not have to shift the layout after the page is loaded.  This goes for Ajax loads as well I believe.

    Just some basic css stuff.  I did these little things in my pages and increased the load speed by 200%. 

    Enjoy!
  15. Omid reza
    Omid reza avatar
    4 posts
    Member since:
    Apr 2012

    Posted 12 Nov 2012 Link to this post


  16. Omid reza
    Omid reza avatar
    4 posts
    Member since:
    Apr 2012

    Posted 12 Nov 2012 Link to this post

    i have a page with no tabs , i just use "load on demand sample" and i have a big problem.
    when i create first tab , i have a user control on it , when i create second tab i load a special user control on second pageview .
    so when i click on firs tab , there is not any thing on it and i lost my user control , why?
    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 Default2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                AddTab("داشبورد");
                AddPageView(RadTabStrip1.FindTabByText("داشبورد"));
            }
        }
        private void AddTab(string tabName)
        {
            RadTab tab = new RadTab();
            tab.Text = tabName;
            RadTabStrip1.Tabs.Add(tab);
        }
        private void AddPageView(RadTab tab)
        {
            RadPageView pageView = new RadPageView();
            pageView.ID = tab.Text;
            RadMultiPage1.PageViews.Add(pageView);
            pageView.CssClass = "pageView";
            tab.PageViewID = pageView.ID;
        }
        private void Dashbord1_a(string str)
        {
        }
        protected void btndashbord_Click(object sender, EventArgs e)
        {
            AddTab("مدیریت دانشکده ها");
        }
        protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {   
            if (e.PageView.ID == "داشبورد")
            {
                    Dashbord dashboard1 = (Dashbord)Page.LoadControl("~/Dashbord.ascx");
                    dashboard1.a += new Dashbord.dl(Dashbord1_a);
                    dashboard1.ID = "داشبورد-usercontrol";
                    e.PageView.Controls.Add(dashboard1);
            }
            else
            {
                Control uc = Page.LoadControl("~/pages/addcolledg.ascx");
                uc.ID = "coll" + "_Usercontrol";
                e.PageView.Controls.Add(uc);
     
            }
        }
        protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
        {
            AddPageView(e.Tab);
            e.Tab.PageView.Selected = true;
        }
    }
  17. Omid reza
    Omid reza avatar
    4 posts
    Member since:
    Apr 2012

    Posted 12 Nov 2012 Link to this post

    i have a page with no tabs , i just use "load on demand sample" and i have a big problem.
    when i create first tab , i have a user control on it , when i create second tab i load a special user control on second pageview .
    so when i click on firs tab , there is not any thing on it and i lost my user control , why?
    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 Default2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                AddTab("داشبورد");
                AddPageView(RadTabStrip1.FindTabByText("داشبورد"));
            }
        }
        private void AddTab(string tabName)
        {
            RadTab tab = new RadTab();
            tab.Text = tabName;
            RadTabStrip1.Tabs.Add(tab);
        }
        private void AddPageView(RadTab tab)
        {
            RadPageView pageView = new RadPageView();
            pageView.ID = tab.Text;
            RadMultiPage1.PageViews.Add(pageView);
            pageView.CssClass = "pageView";
            tab.PageViewID = pageView.ID;
        }
        private void Dashbord1_a(string str)
        {
        }
        protected void btndashbord_Click(object sender, EventArgs e)
        {
            AddTab("مدیریت دانشکده ها");
        }
        protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {   
            if (e.PageView.ID == "داشبورد")
            {
                    Dashbord dashboard1 = (Dashbord)Page.LoadControl("~/Dashbord.ascx");
                    dashboard1.a += new Dashbord.dl(Dashbord1_a);
                    dashboard1.ID = "داشبورد-usercontrol";
                    e.PageView.Controls.Add(dashboard1);
            }
            else
            {
                Control uc = Page.LoadControl("~/pages/addcolledg.ascx");
                uc.ID = "coll" + "_Usercontrol";
                e.PageView.Controls.Add(uc);
     
            }
        }
        protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
        {
            AddPageView(e.Tab);
            e.Tab.PageView.Selected = true;
        }
    }
  18. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 15 Nov 2012 Link to this post

    Hello Semith,

    I have prepared a sample project for you to demonstrate you the correct implementation. Please, let me know if I had missed something. Find the sample attached.

    Regards,
    Nencho
    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
UI for ASP.NET Ajax is Ready for VS 2017