Saturday, April 16, 2011

Show a document library hierarchy in a tree view

Objective:
To programmatically build a tree view that shows a specific document library.
Solution:
To achieve this goal, SharePoint offers the classes:
- SPHierarchyDataSourceControl
- SPTreeView
With SPHierarchyDataSourceControl you can build the entire hierarchy of you web. In this case we need to limit it to a single document library.
Build a new Web Part and override the CreateChildControls method with the following code, modifying the data source with your needed:

protected override void CreateChildControls()
{
           
        SPDocumentLibrary docLib = GetDocLib(SPContext.Current.Web.ServerRelativeUrl, "Shared Documents");
        //change GetDocLib with your code to get a SPDocumentLibrary object

SPHierarchyDataSourceControl myDataSource = new SPHierarchyDataSourceControl();
myDataSource.ID = "myTreeViewDataSource";
myDataSource.RootContextObject = "Web";
        myDataSource.IncludeDiscussionFolders = false;
        myDataSource.ShowDocLibChildren = true;
        myDataSource.ShowFolderChildren = true;
        myDataSource.ShowListChildren = false;
        myDataSource.ShowWebChildren = false;
        myDataSource.Web = SPContext.Current.Web;
        myDataSource.RootWebId = SPContext.Current.Web.ID.ToString();
        myDataSource.RootContextObject = null;
        myDataSource.RootListId = docLib.ID.ToString();
           

        SPTreeView myTreeView = new SPTreeView();
        myTreeView.ID = "myTreeView";
        myTreeView.DataSourceID = "myTreeViewDataSource";
        myTreeView.EnableClientScript = true;
        myTreeView.EnableViewState = true;
        myTreeView.NodeIndent = 12;
        myTreeView.NodeStyle.CssClass = "ms-navitem";
        myTreeView.NodeStyle.HorizontalPadding = 2;
        myTreeView.SelectedNodeStyle.CssClass = "ms-tvselected";
        myTreeView.ExpandDepth = 0;
        myTreeView.ExpandImageUrl =
        SPUrlUtility.CombineUrl(SPContext.Current.Web.ServerRelativeUrl, "/_layouts/images/tvplus.gif");

        myTreeView.CollapseImageUrl =
        SPUrlUtility.CombineUrl(SPContext.Current.Web.ServerRelativeUrl, "/_layouts/images/ tvminus.gif");

        myTreeView.NoExpandImageUrl =
       SPUrlUtility.CombineUrl(SPContext.Current.Web.ServerRelativeUrl, "/_layouts/images/ tvblank.gif");

        myTreeView.SkipLinkText = "";
        myTreeView.ShowLines = true;
        Controls.Add(myTreeView);
}

12 comments:

  1. Hi!

    God post!
    I missing the method GetDocLib(). Is it your own method or am i missing a namespace

    Regards

    Magnus (sweden)

    ReplyDelete
  2. Thanks Magnus,

    not missing namespace.
    The attentions of the article are focused on the SPHierarchyDataSourceControl and SPTreeView classes.

    GetDocLib it is just a placeholder for your own code to get a Document Library that you need, like specified in the code comment.

    If you need an example I can send you.

    Regards,
    Antonio

    ReplyDelete
  3. Control doesn't shows the files within folder. It shows the sub folder but not files. Is something need to be added to code?

    Sanjay Jha

    ReplyDelete
  4. Hi Sanjay,

    it works like the standard Navigation tree, and it doesn't show any items.
    Unfortunately there isn't any properties that allow you to do that in a easy way.

    Regards,
    Antonio.

    ReplyDelete
  5. Hello,

    I have the same problem. Can you give an example of GetDocLib ?

    thanks

    ReplyDelete
  6. Open the document library as a SPList and cast it to SPDocumentLibrary.
    You can find many example at this link:
    http://www.zfxy.net/6723.html

    ReplyDelete
  7. Hi,

    I am new to sharepoint.

    Can I have the full example?

    Thanks

    ReplyDelete
  8. Nice chapter for beginner like me...
    but im getting this error:
    The DataSourceID of 'myTreeView' must be the ID of a control of type IHierarchicalDataSource. A control with ID 'myTreeViewDataSource' could not be found.

    ReplyDelete
  9. Please help me coming out of it...

    ReplyDelete
  10. Hi Sonali,
    The above code is missing SPHierarchyDataSourceControl control to add.
    you can see here
    http://asharepointsolutions.blogspot.in/

    ReplyDelete
  11. Unable to add selected web part(s). The DataSourceID of 'myTreeView' must be the ID of a control of type IHierarchicalDataSource. A control with ID 'myTreeViewDataSource' could not be found.

    ReplyDelete