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.