Binding treeview control to web.sitemap file

Suggested Videos
Part 158 - Binding menu control to web.sitemap file
Part 159 - TreeView control
Part 160 - Binding asp.net treeview control to an xml file



This is continuation to Part 160. Please watch Part 160, before proceeding. In Part 158, we discussed binding menu control to web.sitemap file using sitemapdatasource control. Binding treeview control to web.sitemap file is similar.



Here are the steps to achieve this.
1. Add web.sitemap file. Copy and paste the following XML
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
  <siteMapNode title="DummyRoot">
    <siteMapNode url="~/Home.aspx" title="Home"/>
    <siteMapNode url="~/Employee.aspx" title="Employee">
      <siteMapNode url="~/UploadResume.aspx" title="Upload Resume"/>
      <siteMapNode url="~/EditResume.aspx" title="Edit Resume"/>
      <siteMapNode url="~/ViewResume.aspx" title="View Resume"/>
    </siteMapNode>
    <siteMapNode url="~/Employer.aspx" title="Employer">
      <siteMapNode url="~/UploadJob.aspx" title="Upload Job"/>
      <siteMapNode url="~/EditJob.aspx" title="Edit Job"/>
      <siteMapNode url="~/ViewJob.aspx" title="View Job"/>
    </siteMapNode>
    <siteMapNode url="~/Admin.aspx" title="Admin">
      <siteMapNode url="~/AddUser.aspx" title="Add User"/>
      <siteMapNode url="~/EditUser.aspx" title="Edit User"/>
      <siteMapNode url="~/ViewUser.aspx" title="View User"/>
    </siteMapNode>
  </siteMapNode>
</siteMap>

2. Drag and drop "SiteMapDataSource" control onto the webform. By default, a SiteMapDataSource control reads data automatically from web.sitemap file. 
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

3. Finally drag and drop TreeView control onto the webform and set DataSourceID attribute, to the ID of the SiteMapDataSource control created in Step 2.
<asp:TreeView ID="Treeview1" DataSourceID="SiteMapDataSource1" runat="server">
</asp:TreeView>

That's it. Run the application and notice that, the TreeView control is bound to web.sitemap file. One problem here is that, the Root node is also displayed.

Hiding Root node in the TreeView control.
To hide the Root node in the TreeView control, set ShowStartingNode attribute of the SiteMapDataSource control to false.
<asp:SiteMapDataSource ShowStartingNode="false" ID="SiteMapDataSource1" runat="server" />

To open the target page in a new window set Target attribute of TreeView control to _blank as shown below.
<asp:TreeView ID="Treeview1" Target="_blank" DataSourceID="SiteMapDataSource1" runat="server">
</asp:TreeView>

No comments