I recently had the goal to create a SharePoint navigation that behaves almost like a tree-view:
- Starting on the root (1st-level), you see the navigation items that are directly under the root(2nd-level)
- If you select one node on the 2nd-level, you can see all navigation items on the 2nd-level plus the ones below the selected one (3rd-level).
- If you open another child (3rd-level), you can see all nodes of the 1st- and 2nd and 3rd-Level within the path you’ve chosen plus the children nodes of the 4th level
- And so on.
Example: Current path is “Finance à IT à DataCenter Services
Home
Finance
Purchasing
IT
DataCenter Services (current Node)
Organization
Guidelines
…
Workplace Services
…
Controlling
…
HR
…
The point is that you can see within the current branch all nodes on each level but all the nodes that are not in the current path are collapsed. So if you decided for another node, say – on the 3rd level – the previous node on the 3rd level gets collapsed and the current node expands.
Example: Current path is “Finance à Controlling
Home
Finance
Purchasing
IT
Controlling
Business Controlling
Finance Controlling
…
HR
…
According to my knowledge, it is not possible to achieve such a navigational behavior using the standard SharePoint QuickLaunch navigation. So I tried to use the System.Web.UI.WebControls.TreeView Control. However, this is a “real” tree-view, so I need to leave it up to the user to expand/collapse the nodes.
Finally the solution: I create a very short class that inherits from System.Web.UI.WebControls.TreeView that overrides the OnPreRender-Method and makes sure that based on the currently selected node all other nodes are either expanded or collapsed according to the business rules explained above.
|
using System; using System.Web.UI.WebControls;
namespace YourNameSpace.UI.WebControls { /// <summary> /// This class is derived by the standard ASP.NET TreeView control and adjusts its behaviour /// to leave only the current branch expanded, but shows all top nodes plus the nodes directly under the current node. /// </summary> public class ContentNavigationTreeView : TreeView { /// <summary> /// Adjusts the expanded/collapsed nodes of the treeview. /// </summary> /// <param name="e"></param> protected override void OnPreRender(EventArgs e) { base.OnPreRender(e);
TreeNode currentNode = this.SelectedNode; if (currentNode == null) { // We are in the root this.CollapseAll(); return; }
// Make sure all nodes below the current are collapsed currentNode.CollapseAll();
while (true) { // Expand the current node in order to show the children that are below currentNode.Expand(); TreeNode parentNode = currentNode.Parent; if (parentNode == null) { // we have reached the top level. break; }
// Collapse all siblings that are next to the currentNode. They are still visible, but not their children. foreach (TreeNode siblingNode in parentNode.ChildNodes) { if (!siblingNode.Equals(currentNode)) { siblingNode.CollapseAll(); } }
currentNode = currentNode.Parent; }
// Make sure that all root nodes are collapsed except the one that lies in the current path. foreach (TreeNode rootNode in this.Nodes) { if (!rootNode.Equals(currentNode)) { rootNode.CollapseAll(); } } } } }
|
All you need to do now is to deploy the control to the SharePointFarm and replace the default ASP:Menu Control with your Tree-View (don’t forget to mark the control as SafeControl in web.config).
|
<cc1:ContentNavigationTreeView ID=”ContentNavigation” runat=”server” ShowExpandCollapse=”false” DataSourceID=”CurrentNavSiteMap” SkipLinkText=””> … <add styles> … </cc1:ContentNavigationTreeView> |
Update from April 23:
I forgot to point out that you need to make an adjustment to the Navigation Providers in the web.config file of your SharePoint WebApplication:
Locate the provider named "CurrentNavSiteMapProviderNoEncode" and add the attribute RequireUniqueKeysForNodes="true".
mhofer1976