Treeview control with XML in ASP.NET

Bind XML data to the TreeView Control :

A TreeView control is used when we want to display some data in a hierarchical format. In this post we are going to see the tree view control in ASP.net and how can we use it to display data from an XML file.

Let us create a new web site in Visual studio.  On the design form of the ASPX page, drag and drop a TreeView control. We are going to bind XML data to the treeView. So we will have the XMLDataSource added to the form.

fig1.gif

The design from will have XMLDataSource and TreeView control added

fig2.gif

We will add some formatting to the TreeView control to make it more presentable. Click on the button as shown

fig3.gif

Click on “Auto Format” and select a scheme.

fig4.gif

Now we specify the path of our XML file in the DataFile property of the XMLDataSource.

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="XML_FILE_PATH" XPath="/categories"></asp:XmlDataSource>

On the page load of the ASPX page we write the code to bind the XML data source to the TreeView

protected void Page_Load(object sender, EventArgs e)

{

     TreeView1.DataSource = XmlDataSource1;

     TreeView1.DataBind();

}

The treeview is displayed on the ASPX page. The XML file which contains the data is attached here with the article.

 fig5.gif