TreeView control

Introduction

ASP.Net 2.0 introduces many new controls including a TreeView Control, which can be used to consume information from hierarchical data sources like an XML file and then display that information. In this tutorial, I am going to statically data bind the TreeView control with the contents of an XML file.

TreeView Control Example

Create a new web application, and open the Default.aspx page in design view. Locate the TreeView control in the toolbox and drag it onto the form. Here is what it looks like by default: 

Click on the small box located in the upper right-hand corner of the control, choose Auto Format, and select Contacts style:

This will update the control to look like the above. There are many pre-defined formats for you to choose from, take a few moments to look at each of them.

The next step is to add a new XML file to the project and create your data file:

<?xml version="1.0" encoding="utf-8" ?>
 
<Contacts>
  <Contact Name="Sample 1">
    <Description Value="Phone#, EMail Address, Web-Site">
    </Description>
  </Contact>
  <Contact Name=" Sample 2">
    <Description Value="Phone#, EMail Address, Web-Site">
    </Description>
  </Contact>
  <Contact Name=" Sample 3">
    <Description Value="Phone#, EMail Address, Web-Site">
    </Description>
  </Contact>

</Contacts>

Switch back to Default.aspx and add an XMLDataSource object to the form. Set its DataFile to the new

Select the DataBindings property and open the TreeView DataBindings Editor. It will automatically have loaded the nodes. Select "Description" and click ADD. Set ValueField to Value. (Note: you can set value field and display field separately. Like for instance, you could display Client Names, but set the node's value equal to their ID.)

Click on Apply and exit the Editor. Switch to the XML file and set some real-time entries, and run the application.

That's all there is to it. Simple and clear... now switch back to the Default.aspx page and open the TreeView DataBindings Editor again. This time add databinding settings for the Contact nodes.

Save and run the application again.Change the values in the XML file, and refresh your web-page to see the changes in the tree.