Adding a Treeview to a Document Library using SPTreeView and SPHierarchicalDataSource

Although metadata should generally be used to group items in SharePoint rather than folders,  folders sometimes are needed. They are most commonly used as a security boundary, but I also think that users naturally understand how to navigate a folder structure with no training at all. Using a treeview for navigation as documented below makes them even easier to use.

To add a treeview to a document library view, follow these steps:

1. Browse to the view you want to add the treeview to. This must be a listview page (i.e. it won’t work on default .aspx or home.aspx).

2. Edit the page in SharePoint Designer — then click Advanced Mode.

3. Add a table to PlaceHolderMain with one row and two columns as shown below  (if you cut and paste the code below all the double quotes will be  open-quote and close-quote. SharePoint doesn’t like these. You need to change them all back to standard double-quotes.):

<table style=”width: 100%”>
<tr valign=”top”>
<td width=”20%”>
</td>
<td>
</td>
</tr>
</table>

4. Move the existing Webpart Zone (the one that contains the view) and all its content to the second <td> you just added.

5. Add the following to the first <td>  you just added (the one whose width is 20%). Again make sure all the double-quotes get pasted properly! (Note that the section crossed-out below is an old way of doing it. The new, simplified version follows)

<SharePoint:SPHierarchyDataSourceControl id=”doclibDataSource” runat=”server” RootListId=”ff460d94-a778-426e-988f-487c654550de”
RootWebId=”6bb72437-8077-4b8c-b2ee-bf389ab08273″ ShowFolderChildren=”true” EnableViewState=”false”>
</SharePoint:SPHierarchyDataSourceControl>
<SharePoint:SPTreeView ID=”doclibtreeview” runat=”server” DataSourceID=”doclibDataSource” EnableViewState=”false” ExpandDepth=”2″
SelectedNodeStyle-CssClass=”ms-tvselected”>
</SharePoint:SPTreeView>

6. Change the RootListId attribute of the SPHierarchyDataSourceControl to whatever is in the ListID Attribute of the  XsltListViewWebPart in the second <TD>.

7 .  Change the RootWebId attribute of the SPHierarchyDataSourceControl to the WebID of the Web the list is in (You want the ID of the Web the list is in, NOT the Site. I often  use SharePoint Manager to get the WebID. You can also use Powershell. I the list is on the RootWeb, and not in a sub-site, use the command

(get-spsite http://siteUrl).RootWeb.ID

to get the WebID

otherwise us the command

(get-spsite http://siteurl).OpenWeb(‘/PathToSubWeb’).ID

<SharePoint:SPHierarchyDataSourceControl id=”doclibDataSource” runat=”server” RootContextObject=”List” ShowFolderChildren=”true” EnableViewState=”false”>
</SharePoint:SPHierarchyDataSourceControl>
<SharePoint:SPTreeView ID=”doclibtreeview” runat=”server” DataSourceID=”doclibDataSource” EnableViewState=”false” ExpandDepth=”2″
SelectedNodeStyle-CssClass=”ms-tvselected”>
</SharePoint:SPTreeView>

Save the page, and then view it in your browser:

I have also added this to an office 365 account(although its tricky to get the web id). Here’s how it looks there:

and in SharePoint 2013 on-prem:

Once you’ve added the treeview to  a Document Library, you can  save the list as a template to reuse it on other lists in your site collection. You can also download the list template and upload it to other site collections for reuse.

Advertisements
This entry was posted in sharepoint, SPD and tagged . Bookmark the permalink.

158 Responses to Adding a Treeview to a Document Library using SPTreeView and SPHierarchicalDataSource

  1. islascanarias says:

    Very much thanks !!
    That was exactly what i searched for : RootContextObject=”List”.
    You are the best !!

    By the way, i have added to the document library the content type link to documents.
    Now i can make links to external sources with http and https urls.
    The file link is not permitted by sharepoint.
    I made some changes to the newlink.aspx in layouts folder to enable link to netshares.
    Now i can create these links.
    The problem is that i can not click to the name of the link.
    By clicking on the name only a empty aspx site occurs.
    Only if i click to the url it works.
    I think it is a sharepoint bug in the handling with file:\\.
    I look on the generated aspx files with the working http link and compare with the not working file link aspx file.
    I see nothing wrong.

    Is there a chance to bring sharepoint to open the netshare links by clicking on the name ?

    Very thanks from matthias

  2. Cristi says:

    I have this error.
    TreeView – doclibtreeviewError parsing control: Could not bind to the ‘EncodedName’ property (specified by TextField) while data binding TreeView. Please check the Bindings fields.
    Could you help me?

    • russgove says:

      You’ve most likely mis-typed something. If you post the content of your page, I’ll take a look.

      • Kelly says:

        Hi Russell,

        This is great. I though I should mention that I too have the same problem as Cristi above but when I actually go into the browser and view the library, it seems to display okay.

        Got me stumped why MS dont give the option to view in Tree View in the Library Settings? Anyway, this works perfectly well for what I need!

  3. Pingback: Document Library con navegación de TreeView | PLABIT – SharePoint Dev

  4. Brett says:

    Thanks for this, it works great. I’ve been given at SP2010 Site Collection and the users have been uploading files into multiple folders, so the tree view will definitely help with this.

  5. rashid says:

    how to display the files as well in the tree view?

  6. Sean says:

    I cannot get this to work. Can you post pictures of the code that shows exactly how you put the information in and where you put it in?

    • Sean says:

      I guess what I am trying to say is that I am confused at to where exactly you paste the table into the code and what you mean by steps 4 and 5. Please let me know when you get a chance!!

      • russgove says:

        Hi,
        You need to Place the Table into ContentPlaceHoldeerMain.. Then move the Webart zone that is in COntentPlaceholderMain into the second tr.

  7. Sean says:

    I am unfamiliar with code so maybe what I am confused about is where I can find ContentPlaceHolderMain that you are talking about because I don’t understand where exactly I need to past the table and what exactly the Webpart zone is that you are saying I should move. Maybe if you could give me some sort of visual that would help me better. Thank you!!!

  8. Phil says:

    Thanks. Great instructions – even for a noob. Only been using Sharepoint (SP2013) for 2 days, and found these instructions and screen pics very useful.

  9. Adam says:

    Hi There, Many thanks for this, working almost flawlessly. No errors and I see the tree view and folder content

    The (small) problem is that when I click on a folder the tree view expands all of the top-level folders (instead of leaving them collapsed.. Is that normal? What am I missing?

  10. Hi using sharepoint 2013 i keep getting Web Part Error:Unknown server tag. Correlation ID: 509c409d-a47d-b047-88b2-0be0f421a29c and Web Part Error: Cannot create XmlSerializers for this Web Part. Correlation ID: 509c409d-a47d-b047-88b2-0be0f421a29c can you help?

    the code i use is this one http://paste.ofcode.org/wJde9B59DBBqL9x9vWjQmY

  11. Hi can you help me? I keep getting Web part Errors,

    Here’s my view code http://paste.ofcode.org/wJde9B59DBBqL9x9vWjQmY

  12. jpw says:

    Thanks for posting this. Is there any way to make the tree drag and drop capable? Also, can it be configured to show Document Sets instead of/in addition to folders?

  13. Pingback: Moving Public Folders to SharePoint: Part 2 – SharePointifications

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s