How to auto-expand Managed MetaData Navigation in SharePoint 2013

Author by Steve Borgwardt

Recently I was asked if it would be possible to have the managed metadata navigation TreeView in SharePoint 2013 automatically expand when the page was first loaded.

While I have seen some articles in the past for SharePoint 2010 to modify the MetadataNavTree user control file in the Templates directory, this solution is not possible while using Office 365 or SharePoint 2013 Online.

image

I figured there would be a way to use some client-side scripting with jQuery to toggle the navigation node so I started looking through the DOM and events on the managed metadata navigation nodes. 

I started by getting the id of the

container for the term set in the treeview. It should be similar to "ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeViewn1".  I noticed that when the page first loads, the href tag calls a JavaScript function called "TreeView_PopulateNode(...)" which does a post-back call to the server to dynamically load the terms and render the navigation.  This is done so the initial page load performance doesn't have an impact if you have a large term set.

After clicking on the term set to load the terms (nodes), I noticed the DOM changed for the term set node and a new method was added to the

container called "TreeView_ToggleNode(...)"

So after a user expands the term set at least once, the data is loaded and it just calls another method to collapse/expand the nodes.

While it seemed straightforward to add a jQuery function once the page finished loading and copy and paste the JavaScript function calls that it used to automatically expand them, there was an issue I noticed.  Once the page loaded it worked fine, however I noticed that after a user would click on a node, the page did a complete post-back and executed the code again, essentially resetting the TreeView and not showing the node highlighted that they selected.

While this would be easy in a asp.net page to detect post-back and fire the event only once, I was limited to using client-side script only.  So knowing that once the navigation is expanded the JavaScript method changes to "_ToggleNode", I added a conditional statement to see if this method doesn't exist in the DOM and if not, this must be the first time the page is loaded and therefore I can call the methods to auto-expand the node.

Auto-expand Managed Metadata Navigation code:

You will need to add a 'Script Editor' webpart to the page and then add a reference to jQuery and modify the ID values and Term Store GUID to match your environment. You can easily get these values by viewing the source or using debugging tools in the browser to copy the JavaScript method on the

element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"> script> <script> $(window).load(function() { // Get the Term Set navigation node href attribute var expandedNode = $('#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeViewn1').attr('href'); // If href does not contain a javascript method with '_ToggleNode' in, this is the first time the page is loading and call methods to expand nodes if (expandedNode.indexOf("_ToggleNode") == -1) { // Auto expand Tags TreeView_PopulateNode(ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView_Data, 1, document.getElementById('ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeViewn1'), document.getElementById('ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeViewt1'), document.getElementById('ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeViewt1i'), ' ', 'Tags', 'Photos/Recipes\\Tags', 't', '30:FieldNameNode:d1572944-fbbe-47df-bb34-bde8c3fadbcd:408f5103-c301-4cc9-b188-73e63094b669:43b4bda7-406f-4345-9110-452abd5a618f:30|ListNode|d1572944-fbbe-47df-bb34-bde8c3fadbcd|408f5103-c301-4cc9-b188-73e63094b669|d610f3ca-c594-42d8-b33f-713106849f4c', 'tt'); // Toggle tree view TreeView_ToggleNode(ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView_Data, 1, document.getElementById('ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeViewn1'), ' ', document.getElementById('ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeViewn1Nodes')) } }); script>
Author

Steve Borgwardt

Senior Application Developer