Clicking tabs loads previous pageviews before new pageview

16 posts, 0 answers
  1. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 23 Nov 2013 Link to this post

    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.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 25 Nov 2013 Link to this post

    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.







  5. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 28 Nov 2013 Link to this post

    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
    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 the blog feed now.
  6. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 28 Nov 2013 Link to this post

    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.
  7. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 29 Nov 2013 Link to this post

    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.
  8. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 03 Dec 2013 Link to this post

    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
    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 the blog feed now.
  9. Bryan
    Bryan avatar
    1 posts
    Member since:
    May 2012

    Posted 06 Feb 2014 in reply to Nencho Link to this post

    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?
  10. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 11 Feb 2014 Link to this post

    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
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  11. Lahiru
    Lahiru avatar
    19 posts
    Member since:
    Dec 2012

    Posted 12 Feb 2014 in reply to Dimitar Terziev Link to this post

    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
  12. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 17 Feb 2014 Link to this post

    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
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  13. Alex
    Alex avatar
    3 posts
    Member since:
    Oct 2015

    Posted 05 Apr Link to this post

    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.
  14. Alex
    Alex avatar
    3 posts
    Member since:
    Oct 2015

    Posted 05 Apr Link to this post

    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:

  15. Alex
    Alex avatar
    3 posts
    Member since:
    Oct 2015

    Posted 06 Apr in reply to Alex Link to this post

    wrapping the javascript in  <telerik:RadCodeBlock  runat="server" ID="radCodeBlock1"></telerik:RadCodeBlock> solved the issue for me.
  16. Patrick
    Patrick avatar
    4 posts
    Member since:
    Jun 2016

    Posted 16 Jun Link to this post

    No solutions for this issues? Ajax is not able to solve the scenario.
  17. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 21 Jun Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017