Dyanimcally tabs and nested tabs in tabstrip

4 posts, 0 answers
  1. Shawn
    Shawn avatar
    30 posts
    Member since:
    Jun 2014

    Posted 30 Jun 2014 Link to this post


    I am new to the Telerik TabStrip control.  I'm trying to figure out how to dynamically create tabs based on what is in a database table.  Some of my tabs will have nested tabs inside them (about three level deep max).  When the user clicks on any of the top row of tabs they will see a second row of tabs related to the tab they clicked on.  When they click on a tab in the second row they will see another row of tabs related to that one.  When they click on a tab in the third row I want to load a user control (.ascx) inside that tab. 

    So-far, I've been able to create the top-level tabs dynamically, but I have not been able to figure out how to nest the second or third row of tabs inside the top level tab(s) so that I can show the user control page.

    I would really appreciate a code example that would point me in the right direction.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Jul 2014 in reply to Shawn Link to this post

    Hi Shawn,

    Please try to bind the RadTabStrip using DataSourceID and load the user control dynamically based on the clicked tab.

    <telerik:RadTabStrip ID="rtabstripEmployee" runat="server" OnTabClick="rtabstripEmployee_TabClick"
    <telerik:RadMultiPage ID="rmultipageUserContol" runat="server">
        <telerik:RadPageView runat="server" ID="rpageviewUserControl">

    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
           rtabstripEmployee.DataFieldID = "Id";
            rtabstripEmployee.DataFieldParentID = "MenuName";
            rtabstripEmployee.DataTextField = "ChartName";
            rtabstripEmployee.DataSourceID = "sqldsEmployees";
    protected void rtabstripEmployee_TabClick(object sender, RadTabStripEventArgs e)
        //based on your requirement load the user control page
        if (e.Tab.Level == 1)
            Control ctrl = Page.LoadControl("TestPage.ascx");
            rmultipageUserContol.SelectedIndex = 0;

    Please provide your code if it doesn't help.
  3. DevCraft R3 2016 release webinar banner
  4. Shawn
    Shawn avatar
    30 posts
    Member since:
    Jun 2014

    Posted 01 Jul 2014 in reply to Shinu Link to this post

    Hello Shinu,

    Thank you for providing the example above.  It helped a lot.  However, I'm having difficulty figuring out how to apply three separate data sources to the tabstrip.  The hierarchy of my tabs is contained within three separate tables (one of the top main row, one for the second row below, and one for a third row of tabs).  From your example above, it seems that the hierarchy is contained within one table.  Do I have to somehow write a SQL statement that combines all three tables or is there a property of the TabStrip that I can use to accomplish this?

    The following show what my three tables' structure is like:
    The main table: SELECT [tabID],[tabLabel],[listOrder],[not_active] FROM [maintabs]
    The second table: SELECT [subtabID],[tabID],[subtabLabel],[listOrder],[not_active] FROM [firstSubtabs]
    The third table: SELECT [pageID],[subtabID],[pageLabel],[listOrder],[not_active],[filePath] FROM [pageSubtabs] 

    Shawn A.

  5. Nencho
    Nencho avatar
    1446 posts

    Posted 04 Jul 2014 Link to this post

    Hello Shawn,

    Please refer to the following online demo, where hierarchical data-binding to a SqlDataSource is demonstrated:



    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top