How to use TreeView control in ASP.NET 2.0

Introduction to TreeView Control

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.

Working the Code: 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="Salman Khalid">
    <Description Value="Phone#, EMail Address, Web-Site">
    </Description>
</Contact>
<Contact Name="Salman 2">
    <Description Value="Phone#, EMail Address, Web-Site">
    </Description>
</Contact>
<Contact Name="Salman 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 XML file. Select the TreeViewControl, and set it's DataSourceID to the XMLDataSource object.

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.

Sample project for this tutorial you can download here. Also, you can extend common facilities of TreeView control by combining with AJAX and develop really powerful applications.

If you want more than standard ASP.NET Menu Control can give you, or you simply don't have a time to reinvent the wheel, you can try some more professional solution like ExpertTree . With this control you can save a lot of programming (and debugging) hours and get nice looking, feature rich solution, already well tested in many other sites worldwide.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback