Software-Entwicklung, Projektleitung, Web-Design
Kontakt:   +41 61 927 18 30
You are here:

Blog

Sitefinity sitemap page with expanded nodes

by Joerg Lang | Jan 14, 2010

Sitefinity makes it easy to add a sitemap control to your site. Simply drop the Site Treeview control from the Navigation control group onto your page. However a problem remains. The nodes of the the sitemap tree are collapsed and not expanded as one would expect. And there is no property around that would automatically display the tree view with all nodes expanded.

Of course you can create a custom control and implement the desired behaviour with only a few lines of code. But uploading the control, registering it within the web config file is quite a big hassle for such a small feature. If you do not share my opinion you can download such a control from Sitefinity CMS Marketplace, but if you want another solution keep on reading.

The included site treeview control uses the RadTreeView control which in turn supports a client side programming API. Knowing this, it is easy to build a small javascript that iterates through all nodes and expands them.
To add the javascript code, it is not necessary to add an external file that you would include with a meta tag, simply add the code to the page using the generic content editor.

Here is how you do it:

  1. Add a Generic Content Control
  2. Switch to edit mode and select the HTML tab to enter the following lines
    <script language="javascript" type="text/javascript"> 
    function ExpandNodes(sender, eventArgs) { var tree = sender; var nodes = tree.get_allNodes(); for (var i=0; i<nodes.length;i++) { nodes[i].expand(); } } </script>
  3. Save the changes. (You won't see anything as you added some javsascript code.)
  4. Next add a Site Treeview Control to the page.
  5. Switch to edit mode and navigate to the Misc section.
  6. Click the Edit button of the TreeView property.
  7. Navigate to the Client Side Events section.
  8. Add the following text to the OnClientLoad property: ExpandNodes


     
  9. Click the I'm done button to save the changes.

If you followed the instructions correctly the treeview should already be displayed with all nodes expanded.

 

1 Comment

  1. 1 Idana 25 Dez
    Hey, sbtule must be your middle name. Great post!

Comment

  1. RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
    RadEditor's components - toolbar, content area, modes and modules
       
    Toolbar's wrapper 
     
    Content area wrapper
    RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.
    It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
    Editor Mode buttonsStatistics moduleEditor resizer
      
    RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.