PANVEGA’s Blog

DotNet Development, SharePoint Customizing, Silverlight, MS Infrastructure and other tips and tricks

Custom SharePoint TreeView Navigation with CodeBehind

Posted by PANVEGA on July 12, 2009

In this short post I gonna explain how easy it is to customize your tree view navigation. In one of my prevois post I explaind how to customize your QuickLaunch Left Navigation in your MasterPages ASP:Menu properties. However the confiuration at this point was limited. I needed a dynamic 3 Level with an automatic expaned and collapse menu.

Read my previous post first:

https://panvega.wordpress.com/2008/04/18/customize-the-sharepoint-navigation-aspmenu

You can solve this problem by using asp:TreeView control:

Replace this code below in your Master Page with the old treeview control:

<asp:TreeView ID=”treeviewLeftNav” runat=”server”

Width=”auto”  HoverNodeStyle-CssClass=”leftNavHover”
DataSourceID=”SiteMapDS”  SelectedNodeStyle-CssClass=”leftNavSelected”
OnPreRender=”ControlTreeView_OnPreRender”
<LevelStyles>
<asp:TreeNodeStyle CssClass=”leftNav1″></asp:TreeNodeStyle>
<asp:TreeNodeStyle CssClass=”leftNav2″></asp:TreeNodeStyle>
<asp:TreeNodeStyle CssClass=”leftNav3″></asp:TreeNodeStyle>
</LevelStyles>
</asp:TreeView>

<PublishingNavigation PortalSiteMapDataSource ID=”SiteMapDS” Runat=”server”
SiteMapProvider=”CurrentNavSiteMapProvider” EnableViewState=”true”
StartingNodeOffset=”0″ ShowStartingNode=”False”
TrimNonCurrentTypes=”Heading”/>


Here is the C# Code Behind fro your treeview:

  • First, create a class file  in a Class Library project
  • your class should inherits from MasterPage (System.Web.UI.MasterPage). If you wont to customize  a PageLayout Page you have to use Microsoft.SharePoint.Publishing.PublishingLayoutPage
  • the TreeView is Collapsed by default
  • change your web.config of the site to allow code behind language in your file
  • deploy the dll in your GAC

void ControlTreeView_OnPreRender(object sender, EventArgs e)
{

treeviewLeftNav.ShowExpandCollapse = false;
foreach(TreeNode n in treeviewLeftNav.Nodes)
{
if(n.NavigateUrl == Request.Url.AbsolutePath)
n.Expand();
else
{
if(treeviewLeftNav.SelectedNode!=null)
{
if(n!=treeviewLeftNav.SelectedNode.Parent)
{
if(n.ChildNodes.Count>0)
n.Collapse();
}
}
else
{
treeviewLeftNav.CollapseAll();
break;
}
}
RenderTreeNodes(n);
}

if(treeviewLeftNav.SelectedNode!=null)
treeviewLeftNav.SelectedNode.Expand();
}

void RenderTreeNodes(TreeNode node)
{
if(node!=null)
{
if(node.ChildNodes.Count>0)
{
foreach(TreeNode n in node.ChildNodes)
{
if(n.NavigateUrl == Request.Url.AbsolutePath)
{
n.Expand();
}
else
{
if(n!=treeviewLeftNav.SelectedNode.Parent)
n.Collapse();
else
n.Parent.Expand();
}            } }   }
}

Finally enter the fully qualified name, otherwise known as the five-part name, in the Inherits attribute of the page layout or master page directive. The five-part name is the full type name (namespace.class) followed by the strong name of the signed assembly.

<%@ Master Inherits=”CustomMaster.PageLayoutTemplate, CustomMaster, Version=1.0.0.0, Culture=neutral, PublicKeyToken=XXXXXXXXXXXXXX”%>

At this point the code-behind file is wired up to the page layout or master page and developers can do everything they are used to!!!!!

I recommend creating a Solution which do the deploymend on a clean and easy way.

And that´s it. Good Luck!!!

More information about code behind in your Master Page or PageLayout:

http://msdn.microsoft.com/en-us/library/bb986729.aspx

Advertisements

3 Responses to “Custom SharePoint TreeView Navigation with CodeBehind”

  1. julie said

    Thanks..I’ve been looking for a way to add treeview control to my MOSS masterpage. I am new in MOSS, so please understand if I do silly question..:)

    I’ve tried what you instructed, but I faced a couple of problems. first, I could find
    when I try to add it, it gives me an error that it is unrecognizable(PublishingNavigation), so I modified asp:SiteMapDataSource(I thought that it correspons this) ..

    Second, when I add the code-behind and try to build it, it did not recognize the treeviewID(treeviewLeftNav) and gives me an error that treeviewLeftNav is not in this context, so could not complete the build..

    Please let me know what I did wrong…what should I fix…Thanks..

  2. PANVEGA said

    Have you activated the treeview in your site settings?

  3. julie said

    Thanks for the reply. However, I do not know what you mean..Do you mean that to add using System.Web.UI.Webcontrols? If it menas, yes I did..If it means something else, could you explain in detail how to activate treeview in my site setting?
    Thanks…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: