5/07/2010

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:

    image      image     image

 

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”

            image

 

 

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>

 

 

.

13 comments:

Naresh @SharePoint Consultant said...

where can i write this code.

ctl00_PlaceHolderLeftNavBar_ctl01_WebTreeViewV4

what was the above ,i think so is a id ,if it is right let me know,and where can i write srcipt code ,for which control for that javascript function

Mike Smith said...

naresh,

Yes, that is an ID.

Where to add the 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

Mike

Naresh @SharePoint Consultant said...

ID for which control.either sharepoint treeview control or any other

Mike Smith said...

naresh,

The ID is for the DIV that contains the TABLE for the Tree View.

Mike

Naresh @SharePoint Consultant said...

can you please provide me html code for the sharepoint treeview control.

Mike Smith said...

naresh,

> can you please provide me html code for the sharepoint treeview control.

No, but you can just display any SharePoint page that has the Tree View control, view the source of the page and search for "ctl00_PlaceHolderLeftNavBar_ctl01_WebTreeView" to locate the DIV that contains it.

Mike

mr said...

This code is not working for me; i have added after the SPtreeview tag

Mike Smith said...

mr,

I will need more info than that!

Are you working with 2007 or 2010?

If 2010, did you see the note "For SharePoint 2010 replace ..."?

Are you getting a JavaScript error message or a strange looking result?

Mike

mr said...

Mike, using SP2010; adding the code after :

mr said...

using sp2010, i chcked the control ID in source ("ctl00_PlaceHolderLeftNavBar_MyWebTreeView"). After adding the code below the SPTreeView; the entire tree view diappears.

Mike Smith said...

mr,

Was there an error message?

Did the code have any visible impact?

You made the change from:
"ctl00_PlaceHolderLeftNavBar_WebTreeView"
to
“ctl00_PlaceHolderLeftNavBar_ctl01_WebTreeViewV4”

Mike Smith said...

mr,

Two things...

1) "MyWebTreeView"?

It has "My" in the ID? I did some searching in the sites I have access to, including My Sites and cannot find a "MyWebTreeView" ID. Is this a custom tree view?

2) I did a search on a site that has the Service Pack 1 update (and also confirmed this on SharePoint Online / Office 365) and the ID now is:

ctl00_PlaceHolderLeftNavBar_ctl01_ctl01_WebTreeView

In any case, search for "WebTreeView" to find the ID. (I have updated the notes in the article above.)

Mike

RoS said...

Hi,

Have you a solution for Sharepoint 2013 as well?

Thanks
/RoS

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.