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:

  1. <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  2. <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  3. <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
  4. <%@ Import Namespace="Microsoft.SharePoint" %>
  5. <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  6. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeView.aspx.cs" Inherits="TestProject.Layouts.PopUp.TreeView" DynamicMasterPageFile="~masterurl/default.master" %>
  7. <asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server"> </asp:Content>
  8. <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
  9. <asp:Label Text="Please select the document(s) from the Tree" runat="server"></asp:Label> <br />
  10. <asp:placeholder id="placeHolder" runat="server" /> </asp:Content>
  11. <asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server"> Tree View Doc Lib </asp:Content>
  12. <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:
  1. protected override void OnInit(EventArgs e) {
  2. base.OnInit(e);
  3. createTree();
  4. }
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.
  1. void createTree()
  2. {
  3. SPSecurity.RunWithElevatedPrivileges(delegate() {
  4. SPSite currentSite = SPContext.Current.Site;
  5. using(SPWeb currentWeb = currentSite.OpenWeb()) {
  6. // set the tree view properties
  7. treeView.EnableClientScript = true;
  8. treeView.Target = "_self";
  9. treeView.ShowLines = true; // show lines
  10. treeView.ExpandDepth = 1; // expand non
  11. SPList list = currentWeb.Lists["SDLib"]; // Document Library
  12. rootNode = new System.Web.UI.WebControls.TreeNode(list.Title);
  13. rootNode.SelectAction = TreeNodeSelectAction.None;
  14. // loop down the tree
  15. TraverseFolder(list.RootFolder, rootNode); // Iterate through all Folders
  16. // add the root node to tree view
  17. treeView.Nodes.Add(rootNode);
  18. placeHolder.Controls.Add(treeView); // add the Tree view to place Holder which we have added in design
  19. }
  20. });
  21. }
To iterate through each and every folder, the following function is used.
  1. public AspControls.TreeNode TraverseFiles(SPFolder folder, AspControls.TreeNode node) {
  2. try {
  3. // add the files contained in this folder
  4. foreach(SPFile file in folder.Files) {
  5. // create a new node and add to the tree
  6. AspControls.TreeNode childNode = new System.Web.UI.WebControls.TreeNode(file.Name + " (" + file.TimeLastModified.ToShortDateString() + ")", "", "~/_layouts/images/" + file.IconUrl, file.ServerRelativeUrl.ToString(), "");
  7. node.ChildNodes.Add(childNode);
  8. }
  9. // test if we have child folders
  10. bool blnRecurseFolders = folder.SubFolders.Count > 0 ? true : false;
  11. // if we have sub folders then loop through them
  12. if (blnRecurseFolders) {
  13. // loop through the child folders
  14. foreach(SPFolder childFolder in folder.SubFolders) {
  15. // create a new node and loop through the files
  16. TreeNode childNode = new TreeNode();
  17. childNode.Text = childFolder.Name;
  18. childNode.Value = childFolder.ServerRelativeUrl.ToString();
  19. node.ChildNodes.Add(TraverseFiles(childFolder, childNode));
  20. }
  21. }
  22. } catch (Exception e) {
  23. //TODO: handle error
  24. }
  25. return node;
  26. }
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.
  1. 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.