ASP.NET TreeView and SiteMap : 5 Common Tips

Posted by: Suprotim Agarwal , on 1/15/2009, in Category ASP.NET
Views: 56908
Abstract: In this article, we will see 5 common tips when using the ASP.NET TreeView control bound with a SiteMap. It’s very common to display the SiteMap using the TreeView control. The tips shown in this article cover some frequent challenges we face when using these controls.
ASP.NET TreeView and SiteMap : 5 Common Tips
 
In this article, we will see 5 common tips when using the ASP.NET TreeView control bound with a SiteMap. It’s very common to display the SiteMap using the TreeView control. The tips shown in this article cover some frequent challenges we face when using these controls. I assume you know what a sitemap is and have also used the TreeView control.
1. How to Bind an ASP.NET TreeView to a SiteMap
A sitemap is usually displayed in the UI using a Treeview control.  A sample Web.Sitemap is shown below:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
 <siteMapNode title="My Favorites">
    <siteMapNode title="Favorite Sites">       
        <siteMapNode title="ASP.NET Home" url="http://www.asp.net" />
        <siteMapNode title="ASP.NET Articles" url="https://www.dotnetcurry.com" />
        <siteMapNode title="Windows Client" url="http://www.windowsclient.net" />
        <siteMapNode title="Silverlight" url="http://silverlight.net" />
    </siteMapNode>
   
    <siteMapNode title="Favorite Blogs">
      <siteMapNode title="ScottGu Blog"url="http://weblogs.asp.net/scottgu" />
      <siteMapNode title="Technology Blog" url="http://www.devcurry.com" />
      <siteMapNode title="SQL Blog" url="http://www.sqlservercurry.com" />
      <siteMapNode title="Food Lovers" url="http://foodatarian.com" />
    </siteMapNode>
 </siteMapNode>
</siteMap>
 
Now add a SiteMapDataSource Control from the toolbox (Data tab) to your page and set the DataSource property of the TreeView to this SiteMapDataSource as shown below:
    <div>
         <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">
         </asp:TreeView>
         <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
    </div>
 
That’s it.
2. Remove A Node from the ASP.NET TreeView Dynamically
In order to remove a node dynamically from the TreeView bound to a sitemap, use the ontreenodedatabound event as shown below. In this sample, I am removing the “Food Lovers” node for demonstration sake:
         <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
             ontreenodedatabound="TreeView1_TreeNodeDataBound">
         </asp:TreeView>
C#
    protected void TreeView1_TreeNodeDataBound(object sender, TreeNodeEventArgs e)
    {
        if (e.Node.Text == "Food Lovers")
        {
            e.Node.Parent.ChildNodes.Remove(e.Node);
        }
    }
 
VB.NET
      Protected Sub TreeView1_TreeNodeDataBound(ByVal sender As Object, ByVal e As TreeNodeEventArgs)
            If e.Node.Text = "Food Lovers" Then
                  e.Node.Parent.ChildNodes.Remove(e.Node)
            End If
      End Sub
As you can see in the image below, the ‘Food Lovers’ node is not displayed.
Remove Tree Node
3. How to expand only one parent node of the ASP.NET Treeview control bound to a SiteMap
Have you faced a requirement where only one parent node should be expanded at any given point of time? For example, if the ‘Favorite Blogs’ node is expanded and the user clicks on the ‘Favorite Sites’ node to expand it, the ‘Favourite Blogs’ node should collapse. Use the following code in the TreeNodeExpanded event
C#
protected void TreeView1_TreeNodeExpanded(object sender,
TreeNodeEventArgs e)
{
    string currValue = e.Node.Value.Trim();
    if (e.Node.Parent == null)
    {
        foreach (TreeNode node in TreeView1.Nodes)
        {
            if (node.Value != currValue)
            {
                node.Collapse();
            }
        }
        return;
    }
    else
    {
        TreeNode tnode = e.Node.Parent;
        foreach (TreeNode node in tnode.ChildNodes)
        {
            if (node.Value != e.Node.Value)
            {
                node.Collapse();
            }
        }
    }
}
VB.NET
Protected Sub TreeView1_TreeNodeExpanded(ByVal sender As Object, ByVal e As TreeNodeEventArgs)
      Dim currValue As String = e.Node.Value.Trim()
      If e.Node.Parent Is Nothing Then
            For Each node As TreeNode In TreeView1.Nodes
                  If node.Value <> currValue Then
                        node.Collapse()
                  End If
            Next node
            Return
      Else
            Dim tnode As TreeNode = e.Node.Parent
            For Each node As TreeNode In tnode.ChildNodes
                  If node.Value <> e.Node.Value Then
                        node.Collapse()
                  End If
            Next node
      End If
End Sub
The output is as shown below:
One Parent
As you can see, the ‘Favorite Blogs’ node collapses when the user clicks on the ‘Favorite Sites’ node.
4. Multiple SiteMaps Bound to Multiple TreeViews
By default, when you add a new sitemap to your project, the default file created is the Web.SiteMap. The SiteMapDataSource by default refers to this file. However if you would like to create multiple sitemaps and bind them to different treeview’s in your project, then here’s how to do so:
Add a set of providers in the web.config file as shown below:
<system.web>
    <siteMap defaultProvider="SiteMap1" enabled="true">
      <providers>
        <add siteMapFile="Web.sitemap" name="SiteMap1" type="System.Web.XmlSiteMapProvider"/>
        <add siteMapFile="web2.sitemap" name="SiteMap2" type="System.Web.XmlSiteMapProvider"/>
      </providers>
    </siteMap>
Note: The defaultProvider is the name of the provider, in our case SiteMap1
Now in the SiteMapDataSource, specify the provider you want to use. Observe the ‘SiteMapProvider’ attribute.
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"
         SiteMapProvider="SiteMap1" />
<asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server"
         SiteMapProvider="SiteMap2" />
Finally bind the TreeView DataSource to the desired SiteMapDataSource
<asp:TreeView ID="TreeView1" runat="server"
             DataSourceID="SiteMapDataSource1">
<asp:TreeView ID="TreeView2" runat="server"
             DataSourceID="SiteMapDataSource2">
This way you can have multiple sitemap files bound to multiple TreeView controls.
5. Adding AlternateUrl’s in the SiteMap node and Binding to the ASP.NET TreeView
Let’s say you want to specify an alternate url in the SiteMap and want to bind the TreeView to this alternate url at runtime, here’s how to do so
Declare a custom attribute called ‘secondUrl’ (or anything you want) on the SiteMapNode in the SiteMap file as shown below:
<siteMapNode title="ASP.NET Home" url="http://www.asp.net" secondUrl="http://www.asp.net/ajax" />
Now in the TreeNodeDataBound event, retrieve the SiteMapNode and for those nodes that have this custom attribute set. Once the SiteMapNode is retrieved, extract this custom attribute and set the NavigateUrl property as shown below:
<asp:TreeView ID="TreeView1" runat="server"
             DataSourceID="SiteMapDataSource1"
             OnTreeNodeDataBound="TreeView1_TreeNodeDataBound">
         </asp:TreeView>
C#
protected void TreeView1_TreeNodeDataBound(object sender, TreeNodeEventArgs e)
{
    SiteMapNode node = e.Node.DataItem as SiteMapNode;
   
    if(!string.IsNullOrEmpty(node["secondUrl"]))
        e.Node.NavigateUrl = node["secondUrl"];
}
VB.NET
Protected Sub TreeView1_TreeNodeDataBound(ByVal sender As Object, ByVal e As TreeNodeEventArgs)
      Dim node As SiteMapNode = TryCast(e.Node.DataItem, SiteMapNode)
 
      If (Not String.IsNullOrEmpty(node("secondUrl"))) Then
            e.Node.NavigateUrl = node("secondUrl")
      End If
End Sub
Those were some common tips associated with the TreeView control bound to the SiteMap file. I hope this article was useful and I thank you for viewing it.
If you liked the article,  Subscribe to my RSS Feed or Subscribe Via Email 
 

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for ten consecutive times. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by biswa on Monday, March 2, 2009 5:11 AM
very nive
Comment posted by biswa on Monday, March 2, 2009 5:12 AM
very nice
Comment posted by atlantic on Sunday, March 22, 2009 8:58 AM
i think that this article is very useful for me . thank you very much.
Comment posted by Vikas on Monday, March 23, 2009 12:28 AM
Very nice article , you should g ahead and make second version of this , in with Node is stored in to the database instead of site map ,and load dynamically.

Waiting !!!
Comment posted by Thnaigainathan on Monday, March 23, 2009 2:10 AM
Hi,

Nice article. Can you please let me know how to bind the nodes from the database ?

Thanks ,
Thanigainathan.S
Comment posted by LV on Monday, March 23, 2009 8:14 AM
Great tips
Comment posted by Suprotim Agarwal on Tuesday, March 24, 2009 2:54 AM
Vikas, Thanigainathan: Thanks for your suggestions. I will write an article on binding Treeview with nodes in DB soon.
Comment posted by sam on Thursday, March 26, 2009 9:21 AM
good article

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook