Creating a Tab Hierarchy

ComponentOne TabStrip for ASP.NET AJAX: TabStrip for ASP.NET AJAX Task-Based Help > Creating a Tab Hierarchy

A C1Tab can contain child tabs, allowing the C1TabStrip to reflect a hierarchical structure. The following instructions will show you how to add child tabs to a C1TabStrip using the smart tag, HTML, and both Visual Basic and C# code. For information on creating a tab hierarchy through databinding, see Binding a C1TabStrip to an Access Data Source, Binding a C1TabStrip to a SiteMap Data Source, and Binding a C1TabStrip to a XML Data Source.

In Design View

Complete the following steps:

1. Click C1TabStrip's smart tag () to open the C1TabStrip Tasks menu and then select TabStrip Designer.

The C1TabStrip Designer Form appears.

2. In treeview, right-click C1TabStrip1 and select Add Child | Tab from the menu.

3. Locate the Text property for Tab1 and type "Pennsylvania" into its text box.

4. Select Pennsylvania, then click the Add Child Item button three times. Observe that three new tabs have been added underneath the Pennsylvania tab:

5. Change the Text properties of Tab1, Tab2, and Tab3 to the following:

• Set Tab1’s Text property to "Erie"

• Set Tab2’s Text property to "Philadelphia"

• Set Tab3’s Text property to “Pittsburgh”.

6. In treeview, select Pittsburgh and then use the Add Child Item button to add three tabs. Rename the tabs as follows:

• Tab1 – "East Liberty"

• Tab2 – "Lawrenceville"

• Tab3 – "Shadyside"

7. Click OK and run the program.

In Source View

To add a hierarchy of tabs in Source view, add the following HTML between the <cc1:C1TabStrip> tags:

<Tabs>

<cc1:C1Tab runat="server" Text="Pennsylvania">

<Tabs>

<cc1:C1Tab runat="server" Text="Erie" ID="Erie" >

</cc1:C1Tab>

<cc1:C1Tab runat="server" Text="Philadelphia" ID="Philly" >

</cc1:C1Tab>

<cc1:C1Tab runat="server" Text="Pittsburgh" ID="Pittsburgh" >

<Tabs>

<cc1:C1Tab runat="server" Text="East Liberty" ID="Sliberty">

</cc1:C1Tab>

<cc1:C1Tab runat="server" Text="Lawrenceville" ID="Lville">

</cc1:C1Tab>

<cc1:C1Tab runat="server" Text="Shadyside" ID="Shady">

</cc1:C1Tab>

</Tabs>

</cc1:C1Tab>

</Tabs>

</cc1:C1Tab>

</Tabs>

In Code

Complete the following steps:

1. Create a new ASP.NET AJAX-Enabled Web Site in Visual Studio.

2. In Design view, add a C1TabStrip control to your Web project.

3. Add a reference to Web.UI.Controls.2.dll to your project.

4. In the Solution Explorer window, right click on Default.aspx and select View Code to access the code editor.

5. Import the following namespace into your program:

• Visual Basic

Imports C1.Web.UI.Controls.C1TabStrip

• C#

using C1.Web.UI.Controls.C1TabStrip;

6. Create a parent tab and add it to the C1TabStrip control:

• Visual Basic

'Create the parent tab

Dim TabPA As New C1Tab("Pennsylvania")

'Add the parent tab to C1TabStrip

C1TabStrip1.Tabs.Add(TabPA)

• C#

//Create the parent tab

C1Tab TabPA = new C1Tab("Pennsylvania");

//Add the parent tab to C1TabStrip

C1TabStrip1.Tabs.Add(TabPA);

7. Create three child tabs and add them to the Pennsylvania tab:

• Visual Basic

'Create three child tabs

Dim CityErie As New C1Tab("Erie")

Dim CityPittsburgh As New C1Tab("Pittsburgh")

Dim CityPhiladelphia As New C1Tab("Philadelphia")

'Add all three child tabs to their parent tab

TabPA.Tabs.Add(CityErie)

TabPA.Tabs.Add(CityPittsburgh)

TabPA.Tabs.Add(CityPhiladelphia)

• C#

//Create three child tabs

C1Tab CityErie = new C1Tab("Erie");

C1Tab CityPittsburgh = new C1Tab("Pittsburgh");

C1Tab CityPhiladelphia = new C1Tab("Philadelphia");

//Add all three child tabs to their parent tab

TabPA.Tabs.Add(CityErie);

TabPA.Tabs.Add(CityPittsburgh);

TabPA.Tabs.Add(CityPhiladelphia);

8. Create three child tabs and place them beneath the Pittsburgh tab:

• Visual Basic

'Create three child tabs

Dim Sliberty As New C1Tab("East Liberty")

Dim Lawrenceville As New C1Tab("Lawrenceville")

Dim Shadyside As New C1Tab("Shadyside")

'Add all three child tabs to their parent tab

CityPittsburgh.Tabs.Add(Sliberty)

CityPittsburgh.Tabs.Add(Lawrenceville)

CityPittsburgh.Tabs.Add(Shadyside)

• C#

//Create three child tabs

C1Tab Sliberty = new C1Tab("Lawrenceville");

C1Tab Lawrenceville = new C1Tab("Pittsburgh");

C1Tab Shadyside = new C1Tab("Shadyside");

//Add all three child tabs to their parent tab

CityPittsburgh.Tabs.Add(Sliberty);

CityPittsburgh.Tabs.Add(Lawrenceville);

CityPittsburgh.Tabs.Add(Shadyside);

9. Run the program.

This Topic Illustrates the Following:

By completing the steps in this topic, you have created a tabstrip with three hierarchical levels. Now that you've completed this topic, run the program and click on the Pennsylvania tab to reveal its three child tabs, Erie, Philadelphia, and Pittsburgh. Now click on the Pittsburgh tab and observe that it also has three child tabs, which are named East Liberty, Lawrenceville, and Shadyside.

Your result will resemble the following image: