Manny's SharePoint Blog

Document Library Tree View navigation Control

This control is a explorer tree-type navigator that you can stick inyour sharepoint left navbar.To implement this solution, follow these steps:

1. Create a new Web Control Libray project in vb.net
2. Paste the source code below - also available here.


3. Generate a key file (sn -k {path}\treenav.snk) and reference it in the assemblyinfo.vb as shown here:

   <Assembly: AssemblyKeyFile("c:\keys\libtreenav.snk")>



4. Edit the version number for the assembly ex:

   <Assembly: AssemblyVersion("1.1.1.0")>



5. Recompile the code


6. To trust the assembly, add it to the GAC OR copy it to the bin folder and add a safecontrol entry in the web.config like this:

   <SafeControl Assembly="LibraryTreeView, Version=1.1.1.0, Culture=neutral, PublicKeyToken=db9e239c2db54b1b" Namespace="LibraryTreeView" TypeName="*" Safe="True" />



7. Restart iis.

   Note: You can determine the assembly's PKT by viewing the item properties from the GAC (C:\windows\assembly folder)To render the control:

Next, edit the pages

1. In your default.aspx and in the allitems.aspx of the doclib list template, insert this directive:

   %@ Register Tagprefix="LTV" Namespace="LibraryTreeView" Assembly="LibraryTreeView, Version=,Culture=neutral, PublicKeyToken= yourassemlblypkt" %>



2. The control uses Geir Landro's dtree javascript ( www.destroydrop.com/tree ) so you need to download this, I place the dtree.js in layouts\1033 and used layouts\1033\images\img to store the dtree images for this.(you can put them wherever you want)


3. Reference the script and the css file in your default.aspx and allitems.aspx

   <link rel="StyleSheet" href="/_layouts/1033/styles/dtree.css" type="text/css" />

   <script type="text/javascript" src="/_layouts/1033/dtree.js"></script>
   



4. Place the control into the navigation Table, best right at the top, before the Documents navbar item.
   

   <LTV:TreeViewNav id="LTVNav1" runat="server" />
   



5. You will also need to customize the dtree.css file to control the boundaries of the navigator. If you do not set boundaries on the control, as you expand the tree, your navigation column will also expand and the web part page will shrink.
   You can do it like this, for example. You can read about controlling scrollbars to learn how to customise this to your liking.
   in the dtree.css file, edit this class:
   
   
   .dtree {
   font-family: Arial;
   font-size: 8pt;
   color: #000000;
   white-space: nowrap;
   overflow-x: scroll;
   overflow-y: hidden;
   
   height: auto;
   width: 120px;
   
   SCROLLBAR-FACE-COLOR: #ffffff;
   SCROLLBAR-ARROW-COLOR: #AF0B1C;
   SCROLLBAR-TRACK-COLOR: #ffffff;
   SCROLLBAR-BASE-COLOR: #ffffff;
   scrollbar-shadow-color: #ffffff;
   scrollbar-darkshadow-color: #ffffff;
   scrollbar-highlight-color: none;
   scrollbar-3dlight-color:#ffffff;
   
   }

To open the linked documents in a new window, change (add) the following italicised code in the dtree.js
if ((node.icon == this.icon.folder) {
str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';
}else{
str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" target="new" href="' + node.url + '"';}

© 2004 Manuel Montes

# posted by Manuel Montes @ 10:59:00 AM