Silver Award WinnerSilver Award Winner

About this Article

The purpose of this article is to provide details on how to do re-branding of Keyfilters and Treeview navigation bar in SharePoint 2013 Document Library using NavResizer.js" jquery file available in SharePoint.

Requirement/ Scenario


To design a custom master page with left menu and Document Library Tree View control at right to the left menu.

Solution

In SharePoint 2013, “NavResizer.js” JavaScript file implements the functionality of treeview control. For rebranding of Treeview and keyfilters navigation bar, we need to override methods in navresizer.js file.

It is not recommended to modify the navresizer.js file directly. As a best practice, one should write his own custom JavaScript and overrides the methods of navresizer.js in custom script.

Some key points on navresizer.js file:

  • Navresizer.js file is loaded dynamically by SharePoint 2013, when treeview control in Document Library is enabled.
  • function initNavResizer() method in navresizer.js file initializes the treeview control.
  • SharePoint maintains hidden fields to store values of navresizerHeight, treeViewRememberScroll. 

Code Snippet:


  1. Custom JavaScript will look like:
$(document).ready(function () {
 
        // checks whether treeview is enabled for document library or not   
        navresizerDefaultEnabled = (null != document.body && /ms-navresizer-enabled/.test(document.body.className));
 
        // document body style class that disables the navresizer download even for MDN cases
        navresizerDisabled = (null != document.body && /ms-navresizer-disabled/.test(document.body.className));
 
       // Test whether we should download and activate the navresizer controls 
       // calling initNavResizer method
        if (!navresizerDisabled && navresizerDefaultEnabled) {
            EnsureScript('NavResizer.js', TypeofFullName('Microsoft.Office.Server.Ajax.NavResizer'), initNavResizer);
             }
 
        // Overriding initNavResizer() method available navresizer.js
        function initNavResizer()
             {    
                              // Specifying the width from left where the treeview control to appear
$("#ctl00_PlaceHolderLeftNavBar_ctl04_NavResizerWidth").val("440");
 var resizer = new              Microsoft.Office.Server.Ajax.NavResizer('ctl00_PlaceHolderLeftNavBar_ctl04_NavResizerWidth',
'ctl00_PlaceHolderLeftNavBar_ctl04_NavResizerHeight', 'ctl00_PlaceHolderLeftNavBar_ctl04_TreeViewRememberScroll','idKeyFiltersContainer', 'ctl00_PlaceHolderLeftNavBar_ctl04_NavResizer');
        }
});

2. Add the above custom JavaScript file to your custom master page file.
<SharePoint:ScriptLink language="javascript" name="<PATH>/<FileName>.js" runat="server" />

See Also

Another important place to find an extensive amount of SharePoint related articles is the TechNet Wiki itself. The best entry point is SharePoint Resources on the TechNet Wiki.