Preloading other tabs

[Arthur]

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

[Atanas Korchev]

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.

[Arthur]

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

[Atanas Korchev]

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.

[Arthur]

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