ComponentOne TabStrip for ASP.NET AJAX: TabStrip for ASP.NET AJAX Task-Based Help > Binding a C1TabStrip to a Data Source > Binding a C1TabStrip to a XML Data Source

Binding a C1TabStrip to a XML Data Source

In this topic, you will learn how to create an XML document, add it to your Web project, and then bind it to a C1TabStrip control.

Complete the following steps:

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

2.   In the Solution Explorer window, right-click on the project and select Add New Item

3.   In the Add New Item dialog box, select XML File and type "animals.xml" into the name field.

 

 

4.   Press Add to include the XML file in the project.

      The animals.xml file is added to your project.

5.   In Solution Explorer, double-click animals.xml to access the file. At this point, the file will only include the following header tag:

 

<?xml version="1.0" encoding="utf-8" ?>

 

6.   Add the following XML to the animals.xml document, placing it beneath the header tag :

     

<root>

  <tab Text="Cats">

    <tab Text="Himalayan"></tab>

    <tab Text="Persian"></tab>

    <tab Text="Siamese"></tab>

  </tab>

  <tab Text="Dogs">

    <tab Text="Akita"></tab>

    <tab Text="Beagle"></tab>

    <tab Text="Pug"></tab>

  </tab>

  <tab Text="Lizards">

    <tab Text="Chameleon"></tab>

    <tab Text="Gecko"></tab>

    <tab Text="Iguana"></tab>

  </tab>

</root>

 

Note:  Observe that the child tabs are indented in the above XAML. 

7.   Add a C1TabStrip control to your project.

8.   Click C1TabStrip's smart tag () to open the C1TabStrip Tasks menu.

9.   In the C1TabStrip Tasks menu, select <New Data Source…> from the Choose Data Source drop-down box. 

The Data Source Configuration Wizard appears.

10.  Select XML File as your data source and then click OK.

      The Configure Data Source dialog box appears.

11.  Click Browse to open the Select XML File dialog box.

12.  Select the App_Data folder and then choose animals.xml from the Contents of folder pane. Click OK.

13.  Exit the Configure Data Source dialog box by clicking OK

14.  Run the project. 

  This Topic Illustrates the Following:

After running your project, observe that your C1TabStrip control contains three parent tabs – Cats, Dogs, and Lizards - and that each tab contains three child tabs. Your final result will resemble the following:

 


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.