Dynamic tabs with user controls

2 posts, 0 answers
  1. Vani
    Vani avatar
    2 posts
    Member since:
    May 2013

    Posted 27 Jun 2013 Link to this post

    Hello,
    I have been trying to improve performance of my page that has aTelerik tabstrip with 8 tabs and many user controls under each tab.
    I read that having multiple pageviews can be a performance drag and so have been trying to dynamically create radtabs,  associate radpageviews and load usercontrols on each tab as they are created.Everything is "working" fine, but as I am trying to improve the performance of the tabs, I find that this scenario -
    -I have programatically created 5 tabs - Tab1 , Tab2, Tab 3, Tab 4, Tab5 .On page load, there is only one radpageview with unique ID, pageView_Tab1 created initially for Tab1. Everything loads fine, no issues.
    -But when I click on Tab2 , control goes into creating pageView_Tab1 again. Then it creates pageView_Tab2.
    -Similar behavior follows as I click on subsequent tabs. E.g, Clicking on Tab3 creates pageView_Tab1, pageView_Tab2 and then creates PageView_Tab3.
    This behavior is very strange , as it keep reloading the pageviews for already loaded tabs- hence no performance increase. Infact, I added code to keep track of already loaded tabs and not re-load it. But tabs show blank. Any help is greatly appreciated.

    Code is below-

    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1"> </telerik:RadAjaxLoadingPanel>

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

    <AjaxSettings>

    <telerik:AjaxSetting AjaxControlID="tabMain">

    <UpdatedControls>
    <
    telerik:AjaxUpdatedControl ControlID="tabMain"></telerik:AjaxUpdatedControl>

    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1">

    </telerik:AjaxUpdatedControl>

    </UpdatedControls>

    </telerik:AjaxSetting>

    <telerik:AjaxSetting AjaxControlID="RadMultiPage1">

     

    <UpdatedControls>

     

    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1">

     

    </telerik:AjaxUpdatedControl>

     

    </UpdatedControls>

     

    </telerik:AjaxSetting>

     

    </AjaxSettings>

     

    </telerik:RadAjaxManager><telerik:RadTabStrip ID="tabMain" runat="server" SelectedIndex="0" onTabClick="tabMain_SelectedTabChanged" MultiPageID="RadMultiPage1" OnClientTabSelecting="onTabSelecting" Orientation="HorizontalTop"></telerik:RadTabStrip>

    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated"> </telerik:RadMultiPage>

    ---codebehind-----------

     

       Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
                AddTab("Tab1")
                AddPageView("Tab2")
                AddTab("Tab3"
                AddTab("Tab4"
                AddTab("Tab5"
    end if

    end sub

      Private Sub AddTab(ByVal tabName As String)
            Dim tab As RadTab = New RadTab
            tab.Text = tabName
            tabMain.Tabs.Add(tab)
        End Sub

    Protected Sub RadMultiPage1_PageViewCreated(ByVal sender As Object, ByVal e As RadMultiPageEventArgs) Handles RadMultiPage1.PageViewCreated

            Dim userControlName As String = "\CompanyDetails\" & e.PageView.ID & "_Tab.ascx"
            Dim userControl As Control = Page.LoadControl(userControlName)
            userControl.ID = e.PageView.ID & "_userControl"
     e.PageView.Controls.Add(userControl)
            RadMultiPage1.FindPageViewByID(e.PageView.ID).Selected = True
    End Sub

    Protected Sub tabMain_SelectedTabChanged(ByVal sender As Object, ByVal e As RadTabStripEventArgs) Handles tabMain.TabClick
            AddPageView(e.Tab.Text)
            e.Tab.PageView.Selected = True
    End Sub

      Private Sub AddPageView(ByVal pageViewID As String)
            If RadMultiPage1.FindPageViewByID(pageViewID) Is Nothing Then
                Dim pageView As New RadPageView()
                pageView.ID = pageViewID.Replace(" ", "") '"RadMultiPage1" '
                RadMultiPage1.PageViews.Add(pageView)
                pageView.Selected = True
            End If
          
        End Sub

  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 02 Jul 2013 Link to this post

    Hello Vani,

    Please refer to the following demos of the RadTabStrip control that I believe would be very useful in implementing the improved performance with the RadTabStrip control:

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top