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

Preloading other tabs

4 Answers 158 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Arthur
Top achievements
Rank 2
Arthur asked on 07 Aug 2008, 02:52 PM
Hi,

    We've been using the Load on Demand functionality of the RadTabStrip control and we are wondering if there is a way to preload the other tabs (on the background) after loading the page and the initially selected index. We are hoping that this is possible so there wouldn't be any delay in loading the controls in these tabs when clicked?

Thanks,
Francis

4 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 07 Aug 2008, 03:16 PM
Hi Francis Rosos,

I have modified our load on demand example to achieve the requested behavior. Please find it attached.
Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Arthur
Top achievements
Rank 2
answered on 08 Aug 2008, 11:08 AM
Hi Albert,

    Thank you for the prompt reply. I was able to test this out in our environment but unfortunately, it doesn't seem to work. The page still do postbacks when I click on the tabs the first time. But after I have clicked on everything and click them again, the page are loading fast without any post back.

    Also, regarding the additional code you gave:
function pageLoad() 
  loadNextPageView(); 
 
I had to remove this line because it causes an error. After loading the page, I click on any tab and the controls are loaded. But it prompts a page error after loading the tab. See screenshot.

    I also used the codes you gave in my developer image and I get a JSON error. After the page is loaded, I click any tab randomly and it works fine. But when I click on another tab, that's when I get the error. See screenshot of the error.

    This is section in my page that has the RadTabStrip control script:
<table style="width:950px" cellpadding="0" cellspacing="0" border="0"
    <tr> 
        <td> 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="RadTabStrip1"
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> 
                            <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                    <telerik:AjaxSetting AjaxControlID="RadMultiPage1"
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> 
                            <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                    <telerik:AjaxSetting AjaxControlID="RadMultiPage1"
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 
 
            <script type="text/javascript"
             
                function onTabSelecting(sender, args) 
                { 
                    if (args.get_tab().get_pageViewID()) 
                    { 
                        args.get_tab().set_postBack(false); 
                    } 
                } 
                 
                function pageLoad() 
                { 
                    loadNextPageView(); 
                } 
             
                function loadNextPageView() 
                { 
                    $find("RadAjaxManager1").ajaxRequest($find("RadMultiPage1").get_pageViews().get_count()); 
                } 
            </script> 
 
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="24px" Width="75px"
                <img alt="Loading..." src="images/loading7.gif" /> 
            </telerik:RadAjaxLoadingPanel> 
            <div> 
            </div> 
        <div class="spreadSheet"
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" OnClientTabSelecting="onTabSelecting" OnTabClick="RadTabStrip1_TabClick" Skin="Hay" MultiPageID="RadMultiPage1" SelectedIndex="0"
            </telerik:RadTabStrip> 
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated"
            </telerik:RadMultiPage> 
        </div> 
    </td> 
    </tr> 
</table> 

This is the inline script that I used:

<script runat="server"
    Const RoleAndExpertise As String = "Role and Expertise" 
 
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
        If Not Page.IsPostBack Then 
            AddTab(RoleAndExpertise) 
            addPageView(RadTabStrip1.FindTabByText("Role and Expertise")) 
            AddTab("Collaboration") 
            AddTab("Blog") 
            AddTab("Personal") 
            AddTab("Contact") 
        End If 
    End Sub 
 
    Private  Sub AddTab(ByVal tabName As String) 
        Dim tab As RadTab =  New RadTab()  
        tab.Text = tabName 
        RadTabStrip1.Tabs.Add(tab) 
    End Sub 
 
    Protected Sub RadMultiPage1_PageViewCreated(ByVal sender As Object, ByVal e As RadMultiPageEventArgs) Handles RadMultiPage1.PageViewCreated 
        Dim userControlName As String = Me.getControlName(e.PageView.ID) 
        Dim userControl As Control = Page.LoadControl(userControlName) 
        userControl.ID = e.PageView.ID & "_userControl" 
        e.PageView.Controls.Add(userControl) 
    End Sub 
     
    Private  Sub AddPageView(ByVal tab As RadTab) 
        Dim pageView As RadPageView =  New RadPageView()  
        pageView.ID = tab.Text 
        RadMultiPage1.PageViews.Add(pageView) 
        pageView.CssClass = "pageView" 
        tab.PageViewID = pageView.ID 
    End Sub 
 
    Protected  Sub RadTabStrip1_TabClick(ByVal sender As Object, ByVal e As RadTabStripEventArgs) 
        AddPageView(e.Tab) 
        e.Tab.PageView.Selected = True 
    End Sub 
 
    Protected  Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As AjaxRequestEventArgs) 
        addPageView(RadTabStrip1.FindTabByText("Collaboration")) 
        addPageView(RadTabStrip1.FindTabByText("Blog")) 
        addPageView(RadTabStrip1.FindTabByText("Personal")) 
        addPageView(RadTabStrip1.FindTabByText("Contact"))  
    End Sub 
     
    Private Function getControlName(ByVal pageViewID As String) As String 
        Dim retVal As String = pageViewID 
        Select Case (pageViewID) 
            Case RoleAndExpertise 
                retVal = "RoleAndExpertise" 
        End Select 
 
        Return "~/_controltemplates/" + retVal + "Tab.ascx" 
    End Function 
</script> 

Thanks for your help.


Regards,
Francis
0
Atanas Korchev
Telerik team
answered on 08 Aug 2008, 11:34 AM
Hi Francis Rosos,

The JavaScript routine you have deleted is actually doing the preloading. Please investigate why it returns null in your case. You can use the JavaScript debugger to see which statement returns null.

Kind regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Arthur
Top achievements
Rank 2
answered on 13 Aug 2008, 10:44 AM
Hi Albert,

    I tried debugging my page using javascript debugger and it seems like my code  is experiencing the error in the loadNextPageView(). This is the code I used.

function loadNextPageView() 
   $find("ctl00_PlaceHolderMain_RadAjaxManager1").ajaxRequest($find("ctl00_PlaceHolderMain_RadMultiPage1").get_pageViews().get_count()); 

But this results to "undefined". I tried dissecting the parts of the command and I am able to get results from each.  See below:


$find("ctl00_PlaceHolderMain_RadAjaxManager1") -> Object
$find("ctl00_PlaceHolderMain_RadAjaxManager1").ajaxRequest -> Object
$find("ctl00_PlaceHolderMain_RadMultiPage1").get_pageViews().get_count() -> 1


But when I try to merge them as one command, I can;t get any result but "undefined". I am not sure where the problem is but I think there is something wrong in my use of AjaxRequest.

Your help is very much appreciated. Thanks!


Regards,
Francis Rosos

Tags
TabStrip
Asked by
Arthur
Top achievements
Rank 2
Answers by
Atanas Korchev
Telerik team
Arthur
Top achievements
Rank 2
Share this question
or