This is a migrated thread and some comments may be shown as answers.

Load On Demand Tab/MultiPage

4 Answers 324 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 10 Dec 2010, 08:13 PM
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.

4 Answers, 1 is accepted

Sort by
0
Dimitar Terziev
Telerik team
answered on 14 Dec 2010, 09:17 AM
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Dave
Top achievements
Rank 1
answered on 14 Dec 2010, 04:30 PM
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?
0
Dimitar Terziev
Telerik team
answered on 15 Dec 2010, 03:18 PM
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Dave
Top achievements
Rank 1
answered on 20 Dec 2010, 04:12 PM
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';
        }
    }
}

 

Tags
TabStrip
Asked by
Dave
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
Dave
Top achievements
Rank 1
Share this question
or