We have nested Nested tabstrip/multipage(s) and are using RenderSelectedPageOnly="true". It seems that nested tabstrips and the selected child pages are also rendered before the parent tab item is clicked which means for us about 6 pages are rendered as soon as the user hits the home page, incurring not only web but RDBMS traffic.
It seems this example - http://demos.telerik.com/aspnet-ajax/tabstrip/examples/multipage/dynamic-pageview-creation/defaultcs.aspx
still loads the selectedpage="0" before it is clicked (which in our case for instance would be when the parent tabstrip/multipage is loaded.
Is there a way to avoid this behaviour and only load the child selectedpage when the parent tab containing the child tabstrip/multipage is selected?
4 Answers, 1 is accepted
Attached you will find a simple implementation of RadTabStrip with nested tabs and RadMultiPage. If you run the sample, you will notice that when changing tabs the PreRender event is fired only for the selected sub-tab. May I ask you to use this example and explain the bottleneck that you are trying to overcome? This way we will be able to offer you more appropriate assistance.
I am looking forward to hearing from you.
Regards,
Veselin Tsvetanov
Telerik
Rank 1
Hi Veselin, thank you for the project I was unable to express the behaviour through it and since we cant attach a zip, I am sorry to paste in the project below. The scenario is a web form with a tab wizard that has two pages that each in turn have two pages. In the web form "nested.aspx" Page 0 (tab1) is selected and tab1-1.ascx displays but tab2-1.ascx page_load event executes as well even though tab2 is not selected.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Nested.aspx.cs" Inherits="Test_NestedTabs_Nested" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" />
<div>
<telerik:RadTabStrip ID="tabWizard" runat="server" Orientation="VerticalLeft" RenderSelectedPageOnly="True"
MultiPageID="multipageWizard" Width="125px" AutoPostBack="True">
<Tabs>
<telerik:RadTab ID="tab1" Text="Tab1" PageViewID="Page0" runat="server">
</telerik:RadTab>
<telerik:RadTab ID="tab2" Text="Tab2" PageViewID="Page1" runat="server">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="multipageWizard" runat="server" RenderSelectedPageOnly="true" SelectedIndex="0">
<telerik:RadPageView ID="Page0" runat="server" />
<telerik:RadPageView ID="Page1" runat="server" />
</telerik:RadMultiPage>
</div>
</form>
</body>
</html>
using System;
public partial class Test_NestedTabs_Nested : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
multipageWizard.RenderSelectedPageOnly = true;
multipageWizard.PageViews[0].Controls.Add(LoadControl("Tab1.ascx"));
multipageWizard.PageViews[0].Enabled = true;
tabWizard.Tabs[0].Visible = true;
multipageWizard.PageViews[1].Controls.Add(LoadControl("Tab2.ascx"));
multipageWizard.PageViews[1].Enabled = true;
tabWizard.Tabs[1].Visible = true;
}
}
tab1.asc:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="tab1.ascx.cs" Inherits="Test_NestedTabs_tab1" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<telerik:RadTabStrip ID="tabWizardClient" runat="server" EnableRoundedCorners="true" Orientation="HorizontalTop" RenderSelectedPageOnly="true"
EnableShadows="true" MultiPageID="multipageWizardClient" Width="100%" AutoPostBack="True" ReorderTabRows="True">
<Tabs>
<telerik:RadTab ID="tabSummary" Text="Info" Font-Names="Verdana" Font-Size="Smaller"
PageViewID="Page0" runat="server">
</telerik:RadTab>
<telerik:RadTab ID="tabContact" Text="Communications" Font-Names="Verdana" Font-Size="Smaller"
PageViewID="Page1" runat="server">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="multipageWizardClient" runat="server" RenderSelectedPageOnly="true" SelectedIndex="0">
<telerik:RadPageView ID="Page0" runat="server" />
<telerik:RadPageView ID="Page1" runat="server" />
</telerik:RadMultiPage>
tab1.ascx.cs:
using System;
public partial class Test_NestedTabs_tab1 : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
multipageWizardClient.PageViews[0].Controls.Add(LoadControl("Tab1-1.ascx"));
multipageWizardClient.PageViews[0].Enabled = true;
tabWizardClient.Tabs[0].Visible = true;
multipageWizardClient.PageViews[1].Controls.Add(LoadControl("Tab1-2.ascx"));
multipageWizardClient.PageViews[1].Enabled = true;
tabWizardClient.Tabs[1].Visible = true;
}
}
tab2.ascx:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="tab2.ascx.cs" Inherits="Test_NestedTabs_tab2" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<telerik:RadTabStrip ID="tabWizardReport" runat="server" EnableRoundedCorners="true" Orientation="HorizontalTop" RenderSelectedPageOnly="true"
EnableShadows="true" MultiPageID="multipageWizardReport" Width="100%" AutoPostBack="True" ReorderTabRows="True">
<Tabs>
<telerik:RadTab ID="tabReport1" Text="Report1" Font-Names="Verdana" Font-Size="Smaller"
PageViewID="Page0" runat="server">
</telerik:RadTab>
<telerik:RadTab ID="tabReport2" Text="Report2" Font-Names="Verdana" Font-Size="Smaller"
PageViewID="Page1" runat="server">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="multipageWizardReport" runat="server" RenderSelectedPageOnly="true"
SelectedIndex="0">
<telerik:RadPageView ID="Page0" runat="server" />
<telerik:RadPageView ID="Page1" runat="server" />
</telerik:RadMultiPage>
tab2.ascx.cs:
using System;
public partial class Test_NestedTabs_tab2 : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
multipageWizardReport.PageViews[0].Controls.Add(LoadControl("Tab2-1.ascx"));
multipageWizardReport.PageViews[0].Enabled = true;
tabWizardReport.Tabs[0].Visible = true;
multipageWizardReport.PageViews[1].Controls.Add(LoadControl("Tab2-2.ascx"));
multipageWizardReport.PageViews[1].Enabled = true;
tabWizardReport.Tabs[1].Visible = true;
}
}
For brevity only tab2-1.ascx.cs is next, the page_load event runs when the RadMultiPage ID="multipageWizard" in nested.aspx load
using System;
public partial class Test_NestedTabs_Tab2_1 : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
int i = 1;
}
}
Rank 1
I think I realized my error, since I am loading the controls in the page_load of the .ascx ... of course the page_load for the 2nd tab control is loading :
protected void Page_Load(object sender, EventArgs e)
{
multipageWizardReport.PageViews[0].Controls.Add(LoadControl("Tab2-1.ascx"));
multipageWizardReport.PageViews[0].Enabled = true;
tabWizardReport.Tabs[0].Visible = true;
multipageWizardReport.PageViews[1].Controls.Add(LoadControl("Tab2-2.ascx"));
multipageWizardReport.PageViews[1].Enabled = true;
tabWizardReport.Tabs[1].Visible = true;
}
I presume the right way to do this is the OnTabClick event of the RadTabStrip, checking the PageViewID and loading that control?
If so then how do we ensure a "default" page is loaded before the tab is clicked?
thank you
You are right that handling the TabClick server event will solve the multiple loading issue in your scenario. To initially load the default page, you could check if there is a postback and if not, you could load controls there:
protected void Page_Load(object sender, EventArgs e){ if (!IsPostBack) { // Implement your default loading logic here }}Regards,
Veselin Tsvetanov
Telerik