Binding treeview control to an xml file

Suggested Videos
Part 157 - SiteMapPath control in asp.net
Part 158 - Binding menu control to web.sitemap file
Part 159 - TreeView control



In this video, we will discuss binding asp.net TreeView control to an xml file using xmldatasource control. This is continuation to Part 159, so please watch Part 159 before proceeding.



1. Add an XML file and name it TreeViewData.xml. Copy and paste the following xml.
<?xml version="1.0" encoding="utf-8" ?>
<Items>
  <TreeViewItem NavigateUrl="~/Home.aspx" Text="Home"/>
  <TreeViewItem NavigateUrl="~/Employee.aspx" Text="Employee">
    <TreeViewItem NavigateUrl="~/UploadResume.aspx" Text="Upload Resume"/>
    <TreeViewItem NavigateUrl="~/EditResume.aspx" Text="Edit Resume"/>
    <TreeViewItem NavigateUrl="~/ViewResume.aspx" Text="View Resume"/>
  </TreeViewItem>
  <TreeViewItem NavigateUrl="~/Employer.aspx" Text="Employer">
    <TreeViewItem NavigateUrl="~/UploadJob.aspx" Text="Upload Job"/>
    <TreeViewItem NavigateUrl="~/EditJob.aspx" Text="Edit Job"/>
    <TreeViewItem NavigateUrl="~/ViewJob.aspx" Text="View Job"/>
  </TreeViewItem>
  <TreeViewItem NavigateUrl="~/Admin.aspx" Text="Admin">
    <TreeViewItem NavigateUrl="~/AddUser.aspx" Text="Add User"/>
    <TreeViewItem NavigateUrl="~/EditUser.aspx" Text="Edit User"/>
    <TreeViewItem NavigateUrl="~/ViewUser.aspx" Text="View User"/>
  </TreeViewItem>
</Items>

2. Drag and drop an XmlDataSource control on the webform. Set XPath and DataFile attributes as shown below. Notice that DataFile attribute points to the XML file that we added in Step 1.
<asp:XmlDataSource ID="XmlDataSource1" runat="server" 
    XPath="/Items/TreeViewItem" DataFile="~/TreeViewData.xml">
</asp:XmlDataSource>

3. Drag and drop a TreeView control and set DataSourceID attribute to the xmldatasource control we created in Step 2. Also, set DataBindings as shown below.
<asp:TreeView ID="TreeView1" DataSourceID="XmlDataSource1" runat="server">
    <DataBindings>
        <asp:TreeNodeBinding DataMember="TreeViewItem" TextField="Text"
        NavigateUrlField="NavigateUrl" Target="_blank" />
    </DataBindings>
</asp:TreeView>

No comments