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:
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:
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:
Post a Comment