Create Multi-Level Tree View Navigation in MOSS 2007

The purpose of this article is to outline the details necessary to modify the quick launch to use a multi-level ASP.NET 2.0 Tree View control. This will be extremely useful in publishing site applications.

Let's go ahead and begin modifying the master page necessary. What, you don't know about the master page, that's ok, I will post another blog entry outlining this but for now, open your sharepoint designer and browse to the top-level site in question. Remember it is my opinion that it is always good to create your own master page and css styles. The location of the master page is likely to be in _catalogs\masterpage

You can replace the AspMenu control with a TreeView control to display a familiar tree view with nodes that collapse and expand.

To replace the Menu control with the TreeView control

1. Open the master page you are using and find the ContentPlaceHolder container control whose ID is PlaceHolderLeftNavBar.
   
2. In the AspMenu control, find the PlaceHolderLeftNavBar control whose ID is QuickLaunchMenu, and replace SharePoint:AspMenu with ASP:TreeView in both the opening and closing tags.
   
3. Remove the following LevelMenuItemStyles element and its contents from the new TreeView element.
   

   Copy Code
   

   <LevelMenuItemStyles> <asp:MenuItemStyle CssClass="ms-navheader"/> <asp:MenuItemStyle CssClass="ms-navitem"/> </LevelMenuItemStyles> <LevelSubMenuStyles> <asp:SubMenuStyle CssClass="ms-navSubMenu1"/> <asp:SubMenuStyle CssClass="ms-navSubMenu2"/> </LevelSubMenuStyles>
   

4. Edit the web.config
   

   Edit the web.config, look for a named provider definition: "CurrentNavSiteMapProviderNoEncode", add a single property attribute: RequireUniqueKeysForNodes="true"The TreeView control provides properties that allow you to easily customize the control. For more information about Windows SharePoint Services master pages and site customization, see Master Pages.
   

5. Modify master page once more to change datasource
   

   Modify the data source that the Menu/TreeView is hooked up to, it should be immediately beneath it. Change the SiteMapProvider="CurrentNavSiteMapProvider" to SiteMapProvider="CurrentNavSiteMapProviderNoEncode"
   

6. Reset IIS for changes to take effect.
   

   The TreeView control provides properties that allow you to easily customize the control. For more information about Windows SharePoint Services master pages and site customization, see Master Pages.