Nested tabstrip/multipage performance

5 posts, 0 answers
  1. david
    david avatar
    210 posts
    Member since:
    May 2007

    Posted 06 Apr Link to this post

    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?

     

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 11 Apr Link to this post

    Hello David,

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. david
    david avatar
    210 posts
    Member since:
    May 2007

    Posted 11 Apr in reply to Veselin Tsvetanov Link to this post

    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;
        }
    }

     

  5. david
    david avatar
    210 posts
    Member since:
    May 2007

    Posted 11 Apr in reply to david Link to this post

    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

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 13 Apr Link to this post

    Hi David,

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017