Justin Cooney

I was looking for some information or examples about how to customize the SharePoint Tree View control, but couldn’t find any examples or information. I managed to customize it so here are my notes about how.

Background Story:

In ‘out of the box’ SharePoint you can enable a cool left hand menu bar for site navigation called a ‘Tree View’ control. This presents site content as an expandable folder structure for your users to easily navigate. It also will let them navigate folder structure within a list such as the folders inside a Document Library control that you add on your site. 

In this example I’m working with SharePoint 2016 on prem, but I expect this will be the same with other installations of SharePoints such as 2019 or SharePoint SE.

You can enable the Tree View control as an administrator in SharePoint from ‘Site Settings‘, ‘Look and Feel’, ‘Tree View‘.

Once you’ve added the stock tree view control, you’ll notice that it is fairly bare-bones and would need some customizing to look great. For example if you have many nodes, you’ll notice that the tree view control does not do scrolling but just keeps running down the side menu. Then if you are scrolled down and click on a node, the entire page refreshes and you don’t see the node that you just clicked on.

In this case you’ll want to customize your tree view navigation control to vertically scroll. That way your users can scroll on the navigation left hand side bar to where they want to click, and when they click the main content refreshes and also their location on the left hand menu bar stays in view.

Customizing your Tree View:

Step 1) Get the ID of the Tree View Div tag:

To make your Tree View menu bar scroll, you need to add some custom CSS. Basically the tree view menu is created in HTML surrounded by a Div tag and if you style a height in CSS, then you’ll get the scrolling that you need

To find out the ‘id’ of the tree view control I ended up checking the HTML in Telerik Fiddler. You can also view the page source in notepad, but I’d say Fiddler is best for this.

* IMPORTANT: before you look for the tags that I mention below, make sure to click inside a div on the page, put in an enter or space and click to ‘save’ your changes & customize the page. Then you will see the markup I’m mentioning in SharePoint Designer. The control id to set your CSS to will come from the Fiddler source. Remember, the goal here is to compare the Fiddler HTML source with the Master Page Source in SharePoint designer, and to find the correct area and control names to update.

** ALSO IMPORTANT: When checking my code below in several example sites the tags were named the same. However they might be different for you.

For me the id of the Div tag holding the tree view was: ctl00_PlaceHolderLeftNavBar_ctl04_WebTreeView I expect this name should be similar for different versions of SharePoint. Sure enough I checked the master page for a different site with similar layout and the control id is quite different.

Below is an example HTML snippet that you’ll be looking for. You can see the id of the Div that encapsulates the left hand Tree View as the div at the bottom of this snippet right above the table. Notice also that a good place to inject your CSS without causing errors with the page rendering is to add your CSS right below the top Div tag.

<div id="sideNavBox" role="Navigation" class="ms-dialogHidden ms-forceWrap ms-noList">

-- Add your Style Here --	
<div id="DeltaPlaceHolderLeftNavBar" class="ms-core-navigation" role="navigation">
<a id="startNavigation" name="startNavigation" tabIndex="-1"></a>
<div class="ms-core-sideNavBox-removeLeftMargin">
<div id="ctl00_PlaceHolderLeftNavBar_TreeViewNavigationManagerV4" class="ms-tv-box">
<a id="ctl00_PlaceHolderLeftNavBar_idNavLinkSiteHierarchyV4" ...
<div id="ctl00_PlaceHolderLeftNavBar_TreeViewRememberScrollV4" onscroll="javascript:_spOnScroll(this);return false;" style="overflow: auto;">

-- Below is the id of the Div to style the nav bar scrolling --
<div id="ctl00_PlaceHolderLeftNavBar_ctl04_WebTreeView">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>

In one site the id was ctl00_PlaceHolderLeftNavBar_WebTreeViewV4 and in another site it was ctl00_PlaceHolderLeftNavBar_ctl04_WebTreeView, so make sure that you have the correct id when you adapt the CSS code below.

Identifying the id tag was half the battle. Next was updating the HTML to inject my custom CSS.

Step 2) Open your Master Page in SharePoint Designer 2013

As a next step open your SharePoint site in SharePoint Designer 2013. The left hand navigational menu is coded for in your site’s Master Page. For starters find your default master page and clone it (so you can delete it and start over if you make a mistake). In SharePoint Designer 2013 you can click each master page and the one that is the default will have the top menu option to ‘Set as Default’ grayed out. Alternately you can look under Site Settings, Look and Feel, Master page to find what the name of the default Master page is.

Click on your Cloned Master Page and click ‘Edit File’ so that you can see the HTML/Markup.

Step 3) Find the Markup for the Left Hand Nav Bar

You can’t really add your CSS style just anywhere in the markup of the master page. I found the best location is right below the Div tag for the left hand navigation bar. Search for the Div called id=”sideNavBox” . Here’s the tag and I’d inject my custom CSS in a style tag right below it:

<div id="sideNavBox"
role="Navigation"
class="ms-dialogHidden ms-forceWrap ms-noList">
-- INJECT CSS HERE --
  <SharePoint:AjaxDelta id="DeltaPlaceHolderLeftNavBar" BlockElement="true" CssClass="ms-core-navigation" role="navigation" runat="server">

Step 4) Add your CSS Height Style to force Scrolling:

Here’s a simple example of the CSS to make the Tree View scroll:

<div id="sideNavBox"
role="Navigation"
class="ms-dialogHidden ms-forceWrap ms-noList">
<style>
##ctl00_PlaceHolderLeftNavBar_WebTreeViewV4	
{
height:690px;
}
</style>

It’s as simple as that. If you save now, you should see that now your tree view control supports vertical scrolling.

Step 5) Update your CSS to Support Browser Zoom Levels

You’ll probably want to customize your CSS to support various browser resolutions rather than have a fixed vertical height for all zoom levels. For example, vertical scrolling that’s optimized for 150% zoom will look surprisingly small at 100% zoom.

You can update your CSS to set different vertical heights for your Tree View based on the user’s browser zoom level. In CSS that’s called the resolution and you can specify this at the dpi level or at the zoom level where 1x is 100% zoom and 1.5x is 150% zoom. Here is the CSS markup where I set the Tree View control height to handle each browser zoom level so that:

• 100% zoom is 1x, and set at 690px
• 110% zoom is 1.1x, and set at 590px
• 125% zoom is 1.25x, and set at 490px
• 150% zoom is 1.5x, and set at 390px

<style>
	@media (resolution: 1x) {
		#ctl00_PlaceHolderLeftNavBar_WebTreeViewV4		
		{
		  height:690px;
		}
	}			
	@media (resolution: 1.1x) {
		#ctl00_PlaceHolderLeftNavBar_WebTreeViewV4
		{
		  height:590px;
		}
	}
	@media (resolution: 1.25x) {
		#ctl00_PlaceHolderLeftNavBar_WebTreeViewV4		
		{
		  height:490px;
		}
	}
	@media (resolution: 1.5x) {
		#ctl00_PlaceHolderLeftNavBar_WebTreeViewV4
		{
		  height:390px;
		}
	}	
</style>

Note that at one point the site master page I worked with called the control something slightly different, containing _ctl04_ . In that case I updated the code for the different control name and all worked ok:

<style>
	@media (resolution: 1x) {
		#ctl00_PlaceHolderLeftNavBar_ctl04_WebTreeView
		{
		  height:690px;
		}
	}	
	@media (resolution: 1.1x) {
		#ctl00_PlaceHolderLeftNavBar_ctl04_WebTreeView
		{
		  height:590px;
		}
	}
	@media (resolution: 1.25x) {
		#ctl00_PlaceHolderLeftNavBar_ctl04_WebTreeView
		{
		  height:490px;
		}
	}
	@media (resolution: 1.5x) {
		#ctl00_PlaceHolderLeftNavBar_ctl04_WebTreeView
		{
		  height:390px;
		}
	}	
</style>