Loading is too slow if tabstrip's AutoPostBack is true

[Semih]

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

[Atanas Korchev]

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.

[Semih]

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

[Atanas Korchev]

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.

[Semih]

Hello Albert,

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

[Atanas Korchev]

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.

[Semih]

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>

[Joe]

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

[Paul]

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.

[Joe]

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

[Paul]

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.

[Boris]

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

[wildyaker]

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!

[Omid reza]

[Omid reza]

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;
    }
}

[Omid reza]

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;
    }
}

[Nencho]

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