Dyanimcally tabs and nested tabs in tabstrip

[Shawn]

Hello,

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.

[Shinu]

Hi Shawn,

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

ASPX:

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

C#:

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");
        rpageviewUserControl.Controls.Add(ctrl);
        rmultipageUserContol.SelectedIndex = 0;
    }
}

Please provide your code if it doesn't help.
Thanks,
Shinu.

[Shawn]

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] 

Thanks.
Shawn A.

[Nencho]

Hello Shawn,

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

http://demos.telerik.com/aspnet-ajax/tabstrip/examples/populatingwithdata/hierarchicaldatabinding/defaultcs.aspx

Regards,
Nencho
Telerik