Load On Demand Tab/MultiPage

[Dave]

Hi,
I have a website with approx 30 pages that I want to load into RadPageViews in a RadMultiPage and select with a RadTabStrip.  It would take a long time to load all the PageViews when the site is first loaded (several minutes) so I want to do it 'on demand'.  I am using your "Load on Demand" example, except changing the PageViewCreated() to set the .ContentUrl of the PageView to the .aspx of my desired page instead of .Add the UserControl.  I create all the Tabs in the PageLoad of the main page and add in the PageViews as each Tab is selected.  All seems to work fine except once a PageView is created it gets reloaded every PostBack.  I have the java code to stop postbacks when clicking a Tab that already has a PageView but, when you select a 'new' Tab this creates a postback and any already created PageViews appear to be 're-created'.  For example, I create one PageView on startup and get the PageViewCreated() event as expected, where I set it's .ContentUrl to Describe.aspx and the PageLoad in Describe.aspx.cs is called.  Then I select the next Tab and immediately get a PageViewCreated() for the first PageView and the PageLoad in Describe.aspx.cs is called again and 'IsPostBack' is false, and then I get the TabClick event where I add the next PageView and so on.  By the time I've gone to 5 or 6 Tabs all previously created PageViews have to get reloaded each time a new Tab is selected and everything just goes too slow.  Is what I'm attempting possible?  We were doing the same thing using TabContainers and IFrames and were able to get it to do what we needed but I want to use the Telerik stuff... 
Sorry for the long explanation.

[Dimitar Terziev]

Hi Dave,

In order to speed up your website , you could use the RenderSelectedPageOnly="true" property of the MultiPage . This way only the selected PageView will be rendered on your page, not all PageView pages.This will seriously reduce the amount of HTML code on your page. Also you could set ContentUrl when you create the PageView, not in PageViewCreated event. PageViewCreated is fired on every postback, because its purpose is to add user controls in its handler.

Hope this helps.

Regards,
Dimitar Terziev
the Telerik team

[Dave]

Thanks for the suggestions...  It 'almost' works but now the "already loaded pageviews" do not show anything when you go back to them?  Each page loads individually only when the tab is first selected just as I wanted but, once I go to the next 'new' tab, when I select a tab already associated with a pageview it just shows as a blank page?

I have a 'feeling' that what I want cannot be done with PageViews.  I want each page to only load when selected by the user and, once loaded, I want it to remain loaded so that they can quickly flip back and forth between loaded pages...  Is there another control that would make this possible?

[Dimitar Terziev]

Hi Dave,

Actually RenderSelectedPageViewOnly property requires the tabstrip to make a postback on every tabclick - this is needed in order to render the selected pageview. This is the most suitable way to optimize the performance of the page. 

Regards,
Dimitar Terziev
the Telerik team

[Dave]

Hi,

Actually, I was able to get it working exactly as desired using the latest update of your controls. (v.2010.3.1215.35)  You have added 'lazy loading' to the multipage control that appears to have done the trick.  Set the AutoPostBack="false" in the TabStrip and it works like a charm...  Here is how I defined the 2 controls:

<telerik:RadTabStrip ID="TabMain" runat="server"  UnSelectChildren="false"  OnClientTabSelecting="onTabSelecting" Orientation="HorizontalTop" ClickSelectedTab="false" MultiPageID="mpgMain" Align="Left">
</telerik:RadTabStrip>

<telerik:RadPane ID="pnlMain" runat="server" Scrolling="None" OnClientResized="pnlMain_Resized">
  <telerik:RadMultiPage ID="mpgMain" runat="server" SelectedIndex="0" Height="800" EnableViewState="true">
  </telerik:RadMultiPage>
</telerik:RadPane>

In the PageLoad I create all the tabs and create a pageview for each, and set the ContentUrl value to the desired page.  You don't need the OnClientTabSelecting to decide if the page should post back or not, it should never post back.  I just used that to resize the multipage to the radpanel I put it in: (which I also do if the panel is resized - OnClientResized)

function onTabSelecting(sender, args)

{

    var tab = args.get_tab();

    if (tab)
            // if it's a 'parent' tab, get the actual selected tab...
            if (tab.get_tabs().get_count() > 0)
                tab = tab.get_selectedTab();
    if (tab)

    {

        var pg = tab.get_pageView();

        if (pg)

        {

            var pnl = $find('<%= pnlMain.ClientID%>');

            if (pnl)

                // in FireFox it only worked if I made it "NNNpx" and not just an integer value...

                pg.get_element().style.height = String(pnl.getInnerHeight()) + 'px';

        }

    }

}