This tutorial teaches you how installed templates, add the XML Data Source component to the Web site, assign it to the C1TreeView control, and then set the binding for the C1TreeView.

Complete the following steps:

1. From the Toolbox, double-click the C1TreeView icon to add the control to your project.
2. Create and prepare the XML file by completing the following steps:
3. Right-click the App_Data in the Solution Explorer and select Add New Item. The Add New Item dialog box appears.
   1. Select the XML File and rename it "TreeView_Hierarchy.xml". The XML file opens.
   2. In the XML view, add the following data to the TreeViewHierarchy.xml document:

      Markup

      Copy Code

      <?xml version="1.0" encoding="utf-8" ?> <root> <TreeViewNode Text="CDs">\ <TreeViewNode Text="Back to Black"></TreeViewNode> <TreeViewNode Text="Frank"></TreeViewNode> <TreeViewNode Text="Nevermind"></TreeViewNode> <TreeViewNode Text="In Utero"></TreeViewNode> </TreeViewNode> <TreeViewNode Text="Cassette Tapes"> <TreeViewNode Text="Bleach"></TreeViewNode> <TreeViewNode Text="Cheap Thrills"></TreeViewNode> <TreeViewNode Text="Dangerous"></TreeViewNode> <TreeViewNode Text="Bad"></TreeViewNode> </TreeViewNode> <TreeViewNode Text="Vinyl Records"> <TreeViewNode Text="Axis: Bold as Love"></TreeViewNode> <TreeViewNode Text="Full Circle"></TreeViewNode> <TreeViewNode Text="Off The Wall"></TreeViewNode> <TreeViewNode Text="Other Voices"></TreeViewNode> </TreeViewNode> </root>

4. Switch back to the Design view of the .aspx page and complete the following steps to create a new data source:
   1. Click C1TreeView's smart tag to open the C1TreeView Tasks menu and then, from the Choose Data Source drop-down list, select New Data Source.
   2. The Data Source Configuration Wizard dialog box opens.
   3. Select XML File and then click OK.

   XmlDataSource1 is added to the project.

5. Complete the following steps to configure the data source:
   1. Click C1TreeView's smart tag to open the C1TreeView Tasks menu; click Configure Data Source.

      The Configure Data Source dialog box opens.

   2. In the XPath expression text field, enter  "root/TreeViewNode". This will select all TreeViewNodes that are children of root so that the TreeViewNodes are the top-level nodes on the Web page.
   3. Next to Data file text field, click Browse to open the Select XML File dialog box.
   4. Select the App_Data project folder , and then select TreeView_Hierarchy.xml from the Contents of folder pane.
   5. Click OK to close the Select XML File dialog box.
   6. Click OK to close the Configure Data Source dialog box.
6. Complete the following steps to bind the XML tags to the C1TreeViewNodes.
   1. Click C1TreeView's smart tag to open the C1TreeView Tasks menu and click Edit Databindings.

      The Bindings Collection Editordialog box opens.

   2. Click Add to add an empty binding to the project.
   3. Set the binding's properties as follows:
      • Set the DataMember property to "TreeViewNode".
      • Set the TextField property to "Text".
   4. Click OK to close the Bindings Collection Editor:
7. Press F5 to run the project.

Observe that the data from the TreeView_Hierarchy.xml file is reflected in the C1TreeView control.