Display Document Library Folders And Files In Tree View

In many scenarios, we may need to allow users to select files from the document library. In such cases, we will prefer to display the contents i.e. files in a Tree View, so that it would be easy for users to select them. So now, we will see how to display the folders/files in Tree View in an ASPX page (we might show in pop up window).

First, create an empty SharePoint project and map the Layouts folder. In that, add an application page to it. Name the page as TreeView.aspx.

Open the TreeView.aspx page design part and add an ASP place holder to hold the ASP Tree View control to the page.

So, the code in page design will look like the following:

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeView.aspx.cs" Inherits="TestProject.Layouts.PopUp.TreeView" DynamicMasterPageFile="~masterurl/default.master" %>
<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server"> </asp:Content>
<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<asp:Label Text="Please select the document(s) from the Tree" runat="server"></asp:Label> <br />
<asp:placeholder id="placeHolder" runat="server" /> </asp:Content>
<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server"> Tree View Doc Lib </asp:Content>
<asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server"> Tree View Doc Lib </asp:Content>

Now, navigate to the code part and add code to retrieve all the files. Place them in the Tree View.

We can create a function ( createTree ) to load the Tree View. This function should be called in the OnInit function of the page.

The code will look like the below snippet:

protected override void OnInit(EventArgs e) {
base.OnInit(e);
createTree();
}

Now, we have to load the data in createTree function. We will use two more functions to retrieve folders and files from the document library.

void createTree()
{
SPSecurity.RunWithElevatedPrivileges(delegate() {
SPSite currentSite = SPContext.Current.Site;
using(SPWeb currentWeb = currentSite.OpenWeb()) {
// set the tree view properties
treeView.EnableClientScript = true;
treeView.Target = "_self";
treeView.ShowLines = true; // show lines
treeView.ExpandDepth = 1; // expand non
SPList list = currentWeb.Lists["SDLib"]; // Document Library
rootNode = new System.Web.UI.WebControls.TreeNode(list.Title);
rootNode.SelectAction = TreeNodeSelectAction.None;
// loop down the tree
TraverseFolder(list.RootFolder, rootNode); // Iterate through all Folders
// add the root node to tree view
treeView.Nodes.Add(rootNode);
placeHolder.Controls.Add(treeView); // add the Tree view to place Holder which we have added in design
}
});
}

To iterate through each and every folder, the following function is used.

public AspControls.TreeNode TraverseFiles(SPFolder folder, AspControls.TreeNode node) {
try {
// add the files contained in this folder
foreach(SPFile file in folder.Files) {
// create a new node and add to the tree
AspControls.TreeNode childNode = new System.Web.UI.WebControls.TreeNode(file.Name + " (" + file.TimeLastModified.ToShortDateString() + ")", "", "~/_layouts/images/" + file.IconUrl, file.ServerRelativeUrl.ToString(), "");
node.ChildNodes.Add(childNode);
}
// test if we have child folders
bool blnRecurseFolders = folder.SubFolders.Count > 0 ? true : false;
// if we have sub folders then loop through them
if (blnRecurseFolders) {
// loop through the child folders
foreach(SPFolder childFolder in folder.SubFolders) {
// create a new node and loop through the files
TreeNode childNode = new TreeNode();
childNode.Text = childFolder.Name;
childNode.Value = childFolder.ServerRelativeUrl.ToString();
node.ChildNodes.Add(TraverseFiles(childFolder, childNode));
}
}
} catch (Exception e) {
//TODO: handle error
}
return node;
}

To navigate to the folders and add the files present in that folder, we will use the following function.

Find the selected Folder/File from Tree View:

To find the Folder/File which is selected by user from the tree view, we can use the following code.

String selectedFolder = treeView.SelectedValue;

Conclusion

In this article, we learned how to retrieve all the folders and files present in a Document Library, and display them in a Tree View. Also,we learned how to identify the file that is selected by user in the Tree View. The helper functions, which are used to traverse the folders, can be used separately in our project if there is a need to navigate all the folders available in a Document Library.

2 Comments

Join the conversation! Your thoughts help the community grow.

goran ljubic9y ago
Hi i used link https://www.macaw.nl/artikelen/extreme-new-document-button-makeover for display document library on application page but i have a problem. can you ask some questions?
Tarun D10y ago
Nice Share Siva..