SharePoint: Hide the TreeView Icons

 

The following works for both SharePoint 2007 and SharePoint 2010.

 

How can I get rid of the icons in the Tree View?

A while back I got an interesting request… how can I get rid of the icons in the Tree View?  That’s a question I would have never thought to ask!  My quick (and wrong) answer was you could probably do this by changing the attributes of the TreeView control in the master page using SharePoint Designer.  After a bit of trial and error I did come up with a JavaScript solution.  (and I’m sure someone will post a two line jQuery version!)

The end result is much cleaner!

 

The before:                                      and the after:                                  and with lines:

              

 

How to do it…

Hiding the icons takes two JavaScript tricks. The first one removes the images on the initial page load. The second intercepts the web service calls to retrieve further expansions of the tree. I may have missed one or more icon types, but that is easy to fix.

 

To use this code:

• For testing: Add Content Editor Web Part for testing. In 2007 click the Source Editor button and paste the code below. For 2010 save the code below to a text file, upload the file to a library and in the CEWP add a link to the uploaded text file.
  
• For actual use: Add this code to the master page anywhere after where the tree is loaded
  

You will need to use SharePoint Designer to add the tree viewlines.

• Open the site in SharePoint Designer
• Open the master page and search for “ShowLines”
• Change ShowLines = “false” to ShowLines = “true”

           

 

 

The Code…

The following is offered with no warranties!    :-)

 

Note: Do a search of the HTML of a page where you have the tree view enabled.

   For SharePoint 2010 replace:
      "ctl00_PlaceHolderLeftNavBar_WebTreeView"
   with:
      “ctl00_PlaceHolderLeftNavBar_ctl01_WebTreeViewV4”

   or maybe:

      “ctl00_PlaceHolderLeftNavBar_ctl01_ctl01_WebTreeView”

1. Display the page
2. Use the browser’s View Source option to display the HTML
3. Search for “WebTreeView” and find the ID

 

 

There are two copies of the code below, one is “pretty formatted” and one is plain text that may be easier to copy and paste.

 

<script>

// Step 1: hide icons on the initial page load...

//get the tree DIV

var tree = document.getElementById("ctl00_PlaceHolderLeftNavBar_WebTreeView");

//get the treeview rows

var trs = tree.getElementsByTagName("TR");

//loop through the rows and hide the images

for (i=0;i<trs.length;i++)

{

  var tds = trs[i].getElementsByTagName("TD");

  if (tds.length>0)

  {

    tds[1].style.display="none"

  }

} 

// Step 2: intercept the web service call and fix up the returned data

// make a copy of the SharePoint return handler

var backup=TreeView_ProcessNodeData

// create our replacement function

TreeView_ProcessNodeData = function(result, context)

{

  //replace the images with blank.gif  (it*.gif, stsicon.gif and folder.gif)

  result = result.replace(/\/_layouts\/images\/it/g,'/_layouts/images/blank.gif" x="')

  result = result.replace(/\/_layouts\/images\/stsicon/g,'/_layouts/images/blank.gif" x="')

  result = result.replace(/\/_layouts\/images\/folder/g,'/_layouts/images/blank.gif" x="')

  //call the SharePoint return handler

  backup(result, context);

}

</script>

 

 

The following may be easier to copy and paste:

 

<script>

// Step 1: hide icons on the initial page load...

//get the tree DIV
var tree = document.getElementById("ctl00_PlaceHolderLeftNavBar_WebTreeView");

//get the treeview rows
var trs = tree.getElementsByTagName("TR");

//loop through the rows and hide the images
for (i=0;i<trs.length;i++)
{
  var tds = trs[i].getElementsByTagName("TD");
  if (tds.length>0)
  {
    tds[1].style.display="none"
  }
}

// Step 2: intercept the web service call and fix up the returned data

// make a copy of the SharePoint return handler
var backup=TreeView_ProcessNodeData

// create our replacement function
TreeView_ProcessNodeData = function(result, context)
{
  //replace the images with blank.gif  (it*.gif, stsicon.gif and folder.gif)
  result = result.replace(/\/_layouts\/images\/it/g,'/_layouts/images/blank.gif" x="')
  result = result.replace(/\/_layouts\/images\/stsicon/g,'/_layouts/images/blank.gif" x="')
  result = result.replace(/\/_layouts\/images\/folder/g,'/_layouts/images/blank.gif" x="')

  //call the SharePoint return handler
  backup(result, context);
}

</script>

 

 

.