Clicking tabs loads previous pageviews before new pageview

[Steve]

I have a tabstrip with 5 tabs on it. There is a multipage as well. The pageviews are created when the tab for it is clicked, if it doesn't already exist.

If I click on tab 1, the pageview1 for tab 1 is created and displayed. If I click on tab 2, the page load in pageview1 loads, then the pageview2 for tab 2 is created. If I click on tab 3, the page load for pageview1 loads, then the page load for pageview2 loads then the pageview3 for tab 3 is created.

How can I avoid having to load the other pageviews when I go from tab-to-tab? That really slows things down and makes absolutely no sense. If I click on tab 3, I don't want to load pageview1 and pageview2.

[Shinu]

Hi Steve,

Please have a look into the following code snippet to  dynamically create a RadPageView on the OnTabClick event of RadTabStrip.

ASPX:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
    AutoPostBack="true" OnTabClick="RadTabStrip1_Click">
    <Tabs>
        <telerik:RadTab runat="server" Text="Tab1">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Tab2">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Tab3">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Tab4">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Tab5">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
    <telerik:RadPageView ID="RadPageView1" runat="server">
        <label>
            Tab1
        </label>
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView2" runat="server">
        <label>
            Tab2
        </label>
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView3" runat="server">
        <label>
            Tab3
        </label>
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView4" runat="server">
        <label>
            Tab4
        </label>
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView5" runat="server">
        <label>
            Tab5
        </label>
    </telerik:RadPageView>
</telerik:RadMultiPage>

C#:

protected void RadTabStrip1_Click(object sender, Telerik.Web.UI.RadTabStripEventArgs e)
{
    AddPageView(e.Tab.Text);
    e.Tab.PageView.Selected = true;
}
private void AddPageView(string pageViewID)
{
    RadPageView pageView = new RadPageView();
    pageView.ID = pageViewID + i;
    i = i + 1;
    RadMultiPage1.PageViews.Add(pageView);
}

Hope this will helps you.
Thanks,
Shinu.

[Steve]

This doesn't address my issue. My issue is that if Tab3 is clicked, it does a page load for the user control in pageview1 (loaded for tab1), then a page load for user control in pageview2(loaded for tab2), before finally going into the page load for user control in pageview3 (loaded for tab3). I have no issues creating the tabs and the associated pageviews. My problem is that every time I click a tab, all the other pageviews get loaded as well before getting to the actual page I want.

As an example, consider this. Assume I have 5 tabs that have already created 5 pageviews. Now, I click on tab4, this is what happens:



Click tab4.

Page load event for user control in pageview1 loads.

Page load event for user control in pageview2 loads.

Page load event for user control in pageview3 loads.

Page load event for user control in pageview4 finally loads.



What I want to happen is this:



Click tab4

Page load event for user control in pageview4 loads.

That's all.



I don't want to go through all the other load events of all the other user controls loaded in other tabs. That just slows everything down considerably.

[Nencho]

Hello Steve,

Since you are adding the RadTabs and the associated PageViews dynamically, the PageViewCreated event is fired for each PageView added in the collections. This is the reason for loading all previous nested UserControls, until the clicked(newly added) tab and pageview are selected. In order to omit loading PageViews and the nested UserControls, which are already loaded, I would suggest you to implement the approach, demonstrating in this online demo. In particular, you could avoid the PostBack on TabClick, if the current tab has already associated PageView:

<script type="text/javascript">
function onTabSelecting(sender, args)
{
    if (args.get_tab().get_pageViewID())
    {
        args.get_tab().set_postBack(false);
    }
}
</script>

Regards,
Nencho
Telerik

[Steve]

This doesn't help me either. On tab 1 I load information, with buttons to populate new information on tab 2. When I click on tab 3, 4 or 5, it is loaded with new information based upon what is on tab 2. So, If I use your javascript logic, it will not do a postback and update the information for that tab, based upon what is on tab 2. Tab 2, 3, 4 and 5 will never be updated without a postback.

Is there any way to have each tab act individually without a pageview? So, If I click on a button on tab 1, it will cause the data on tab 2 to load. When I click on tab 3, 4 or 5, they are independent of the other tabs, basically do not know that any other tabs exist? This would eliminate the loading of the other tabs and only load itself.

[Steve]

Is there any solution for this? This behavior is really dragging the performance of my site down tremendously!
Seriously, this behavior of loading all previous tabs before loading the one being requested is insane!!! I find it
difficult to believe I'm the only one experiencing this performance hit. There has to be a solution.

[Nencho]

Hello Steve,

I am afraid, that this functionality is embedded in the implementation of the control. It is implemented in such a manner, because if the PageViews are not reloaded when a postback is triggered, the ViewState would be lost and the already filled content in the different PageViews would also be lost.

Regards,
Nencho
Telerik

[Bryan]

This is extremely disappointing. Load on Demand Tabs was one of the key reasons for going with Telerik, yet it is now clear that in fact this just doesn't work correctly.
What are your plans to fix this, or do we need to look elsewhere?

[Dimitar Terziev]

Hi Bryan,

I believe that you have implemented the approach with the OnPageViewCreated server event as shown in this demo here. In such scenario the dynamically loaded user controls will be automatically recreated since the OnPageViewCreated is fired for every PageView in the PageViews collection of the RadMultiPage. If this event is omitted and the user controls are added in the TabClick event only, upon consecutive post-backs they won't be recreated unless they are manually added again (this is due to the fact that the controls dynamically loaded in the controls tree of the page should be recreated upon every postback otherwise they are lost). If you disable the ViewState of the RadMultiPage control the dynamically added pageviews won't be persisted in the postback, thus the server OnPageViewCreated won't be fired and the dynamically loaded user controls won't be recreated. There is another option depending on whether the performance hit is in the initialization and rendering of the controls on the client. If this is the case the RenderSelectedPageOnly property of the RadMultiPage should be set to True, which will result in the fact that the PageView which are not currently selected won't be rendered on the page. If the performance hit is on the server (db access or any other business logic) you could omit the aforementioned server event and keep track whether or not the already loaded user controls should be added to the controls collection upon postback. Please note that when recreating user controls manually the Page_Init event is the appropriate place so the ViewState could be properly applied.

Regards,
Dimitar Terziev
Telerik

[Lahiru]

Hi Dimitar,

I tried the RenderSelectedPageOnly ="true" on my RadMultiPage. And now it only loads the selected tab, but all the previously loaded tabs are empty.

Also, I have RadGrid controls on my user controls, but now the grids are not visible.
Have you seen this behaviour before?

Thank you,
Lahiru

[Dimitar Terziev]

Hello Lahiru,

This is the default behavior when the RenderSelectedPageOnly is true, only the content of the currently selected pageview is rendered on the page. In order to load the content of the other PageViews once they are selected a postback should be made upon tab switching.

Regards,
Dimitar Terziev
Telerik

[Alex]

Hello,I am having a problem where when i click the tab, it goes to page_load() first rather than the radtabstrip_tabclick() function. Any insights to how i can just navigate the tabs without going to the page load.

[Alex]

whenever i use:

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

          <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel4" />
                    </UpdatedControls>
          </telerik:AjaxSetting>
    </AjaxSettings>
    </telerik:RadAjaxManager>

 

 

i get the following error:

[Alex]

wrapping the javascript in  <telerik:RadCodeBlock  runat="server" ID="radCodeBlock1"></telerik:RadCodeBlock> solved the issue for me.

[Patrick]

No solutions for this issues? Ajax is not able to solve the scenario.

[Nencho]

Hello Patrick,

Could you please specify what exactly is the issue that you are experiencing. If it is the error thrown like at the Alex' end, you might consider avoiding placing javascript logic in the title of your page. The other option is to implement the same as Alex did - wrap the code in RadCodeBlock:

http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/radcodeblock-and-radscriptblock#radcodeblock

Regards,
Nencho
Telerik