Sunday, April 1, 2012

SharePoint Folder TreeView

The SPTreeView is an excellent control provided under Microsoft.SharePoint.WebControls namespace. It can be used to display hierarchical data from a data source in a tree structure. 
In this post, I will show you how to use this control to create a tree view which displays all the folders in a document library in an hierarchical fashion. You can expand and contract the nodes in this tree (where each node represents a folder in the document library) and browse to any node, by simply clicking on it. This control can act on standard views as well as explorer views in a document library. You can also use this control in a custom list which has folders enabled in it.
To display how the control could be used, I have created a custom SharePoint WebPart in which a SPHierarchyDataSourceControl acts as the data source input for the SPTreeView control.
The code is given below:



public class FolderTreeView : Microsoft.SharePoint.WebPartPages.WebPart, INamingContainer
    {
        #region variable Declarations
        SPHierarchyDataSourceControl ospHierachialDataSource;
        SPTreeView ospTreeViewFolderHierarchy;
        SPNavigationManager ospNavMgrFolder;
        #endregion


        //Overridden CreateChildControls method for the webpart
        protected override void CreateChildControls()
        {
            try
            {
                //Takes the context of the current list
                if (SPContext.Current.List != null)
                {
                    #region Hierarchial Data Source
                    ospHierachialDataSource = new SPHierarchyDataSourceControl();
                    ospHierachialDataSource.EnableViewState = true;
                    ospHierachialDataSource.IncludeDiscussionFolders = true;
                    ospHierachialDataSource.ShowDocLibChildren = true;
                    ospHierachialDataSource.ShowFolderChildren = true;
                    ospHierachialDataSource.ShowListChildren = true;
                    ospHierachialDataSource.RootContextObject = null;

                    ospHierachialDataSource.ID = "_hierachialDataSource";
                    ospHierachialDataSource.RootWebId = SPContext.Current.Web.ID.ToString();
                    ospHierachialDataSource.RootListId = SPContext.Current.List.ID.ToString();
                    ospHierachialDataSource.DataBind();
                    #endregion

                    #region SPTreeView
                    ospTreeViewFolderHierarchy = new SPTreeView();
                    ospTreeViewFolderHierarchy.DataSourceID = "_hierachialDataSource";
                    ospTreeViewFolderHierarchy.ExpandDepth = 0;
                    ospTreeViewFolderHierarchy.EnableClientScript = true;
                    ospTreeViewFolderHierarchy.EnableViewState = true;
                    ospTreeViewFolderHierarchy.NodeStyle.CssClass = "ms-navitem";
                    ospTreeViewFolderHierarchy.NodeStyle.HorizontalPadding = 2;
                    ospTreeViewFolderHierarchy.SelectedNodeStyle.CssClass = "ms-tvselected";
                    ospTreeViewFolderHierarchy.SkipLinkText = "";
                    ospTreeViewFolderHierarchy.NodeIndent = 12;
                    ospTreeViewFolderHierarchy.ExpandImageUrl = "/_layouts/images/tvplus.gif";
                    ospTreeViewFolderHierarchy.CollapseImageUrl = "/_layouts/images/tvminus.gif";
                    ospTreeViewFolderHierarchy.NoExpandImageUrl = "/_layouts/images/tvblank.gif";
                    ospTreeViewFolderHierarchy.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#F5EBD7");
                    ospTreeViewFolderHierarchy.ShowLines = true;
                    ospTreeViewFolderHierarchy.ShowExpandCollapse = true;
                    ospTreeViewFolderHierarchy.NodeWrap = true;
                    #endregion

                    #region Navigation Manager
                    ospNavMgrFolder = new SPNavigationManager();
                    ospNavMgrFolder.ID = "TreeViewNavigationManager";
                    ospNavMgrFolder.ContainedControl = "TreeView";
                    ospNavMgrFolder.EnableViewState = true;
                    ospNavMgrFolder.Controls.Add(ospHierachialDataSource);
                    ospNavMgrFolder.Controls.Add(ospTreeViewFolderHierarchy);
                    #endregion

                    this.Controls.Add(ospNavMgrFolder);

                    this.ChromeType = PartChromeType.None;
                    AddFolderContentTypeIDToURL();
                }
            }
            catch (SPException)
            {
               //Implement your own exception handling here
            }
            catch (Exception)
            {
                //Implement your own exception handling here
            }
        }
        protected override void Render(HtmlTextWriter writer)
        {
            this.EnsureChildControls();
            this.RenderChildren(writer);
        }

        //If the Folder ContentTypeID is missing from the URL, this method refreshes the page with the FolderContentTypeID
        //Folder Content Type ID is a required parameter for Explorer Views to function properly
        public void AddFolderContentTypeIDToURL()
        {
            if (HttpContext.Current.Request.QueryString["FolderCTID"] == null)
            {
                if (HttpContext.Current.Request.QueryString["RootFolder"] != null)
                {
                    string strFolderRelativeURL = HttpUtility.UrlDecode(HttpContext.Current.Request.QueryString["RootFolder"].ToString());
                    string strFolderContentTypeID = SPContext.Current.List.GetContentTypeIdByUrl(strFolderRelativeURL).ToString();

                    HttpContext.Current.Response.Redirect(HttpContext.Current.Request.Url + "&FolderCTID=" + strFolderContentTypeID, false);
                }

            }
        }

    }

 Next, using SharePoint designer, I have modified the default All Documents view(/Forms/AllItems.aspx) page of a document library and added an extra WebPart zone in the page. The zone was created on the left of the Main WebPart zone which by default contains the document library list view.Then, I added my custom WebPart in the zone which was inserted by me in the page.  I created some dummy folders manually to create a folder structure hierarchy.


The custom WebPart automatically picks up on the folder structure and creates a navigation which enable me to browse through the folders, as shown in the screen shot below:


**Please note: To make the SPTreeView work, you must enable the TreeView navigation in the site. To do that, Go to Site Actions-->Site Settings-->Look and Feel-->Tree View.
In the Tree View page, click on the check box, which says, Enable Tree View.


No comments: