Monday, 27 May 2013

Treeview for a document library using sharepoint designer



To add a treeview to a document library view, folow these steps:
1. Broswe to the view you want to add the treeview to.
2. Edit the page in Sharepoint Designer — then click Advanced Mode.
3. Add a table to PlaceHolderMain with one row and two columns (if you cut and paste this, make sure all the double-quotes get paster properly!):
<table style=”width: 100%”>
   <tr valign=”top”>
    <td width=”20%”>
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 paster properly!
<SharePoint:SPHierarchyDataSourceControl id=”doclibDataSource” runat=”server” RootListId=”ff460d94-a778-426e-988f-487c654550de”
RootWebId=”6bb72437-8077-4b8c-b2ee-bf389ab08273″ ShowFolderChildren=”true” EnableViewState=”false”>
<SharePoint:SPTreeView ID=”doclibtreeview” runat=”server” DataSourceID=”doclibDataSource” EnableViewState=”false” ExpandDepth=”2″
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 (I used sharepoint manager to get the WebID)

8.Getting the webid using below script

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(PageLoad, "sp.js");
function PageLoad() {
this.ctx = SP.ClientContext.get_current();
this.web = ctx.get_web();
ctx.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
function onQuerySucceeded() {
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

I have added this also 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:


  1. Hello Chakri,

    Great Post. It Works.

    One awful problem do i have:
    I want to make a model from the document library.
    Problem is, that the 2 attributes of the SharePoint:SPHierarchyDataSourceControl :
    RootWebId and RootListId can not be created dynamically with code behind.
    Therefore i always have to manipulate the views of the generated document libraries of this model with the sharepoint designer and have to change these attributes manually.
    This is annoying.

    I can get these 2 attributes dynamically with code behind:
    RootWebId = <% SPContext.Current.Web.ID.ToString(); %>
    RootListId = <% SPContext.Current.List.ID.ToString(); %>

    The Problem is, that this Control don´t accept Server Code inplace and i can not manipulate or generate it complete programmatically.

    Do you have any idea, how it could be solved ?


  2. Dear sir,
    The above said coding is very useful for me but my client need to expand and collapse of child and sub child nodes,i try the auto expand and collapse option but it will not work for me

  3. This comment has been removed by the author.