Custom Templated SiteMap Navigator Control

After discovering the power of the SiteMap, especially when linked to Authentication, it wasn't long before binding the TreeView to the map was not enough.

I needed to have total control over what was displayed to the user for each item, so I wrote a Templated SiteMap navigator control. It works in a similar way to an asp:Repeater so should be fairly easy to comprehend.

Here is a very simple example of an implementation:

<pdh:SiteMapNavigator ID="SiteMapNavigator2" runat="Server" FromCurrentLocation="false">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li class="someting<%# Container.RelativeDepth %>">
        <a href="<%# Container.Url %>"><%# Container.Title %></a></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</pdh:SiteMapNavigator>

The above code will render a <ul> as a header then a number of <li> list items representing each link. It works with nesting, each nest level will render a new header.

Properties

The control I've written exposes a couple of properties which tell it how to navigate the site map. These are:

Property	Description
FromCurrentLocation	Indicates that the control will render from the current page down.
MaxDepth	0 based, sets which level to render from

Lots of Templates

I have included a number of templates which represent different states of the sitemap. This example excersised them all:

<pdh:SiteMapNavigator ID="nav1" runat="Server" MaxDepth="0" FromCurrentLocation="false">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    
    <CurrentItemWithChildrenTemplate>
        <li>@@<b><a href="<%# Container.Url %>"><%# Container.Title %></a> 
        [<%# Container.RelativeDepth %>]</b></li>
    </CurrentItemWithChildrenTemplate>
    
    <ItemWithChildrenTemplate>
        <li><b><a href="<%# Container.Url %>"><%# Container.Title %></a> 
        [<%# Container.RelativeDepth %>]</b></li>
    </ItemWithChildrenTemplate>
    
    <CurrentItemTemplate>
        <li>@@<a href="<%# Container.Url %>"><%# Container.Title %></a> 
        [<%# Container.RelativeDepth %>]</li>
    </CurrentItemTemplate>
    
    <ItemTemplate>
        <li><a href="<%# Container.Url %>"><%# Container.Title %></a> 
        [<%# Container.RelativeDepth %>]</li>
    </ItemTemplate>
    
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</pdh:SiteMapNavigator>

The names of the templates should be enough for you to figure out what they do. Feel Free to download the code for this control, along with a very basic sample site.

Enjoy it and kick it!

Author Paul Hayman

Paul is the COO of kwiboo ltd and has more than 20 years IT consultancy experience. He has consulted for a number of blue chip companies and has been exposed to the folowing sectors: Utilities, Telecommunications, Insurance, Media, Investment Banking, Leisure, Legal, CRM, Pharmaceuticals, Interactive Gaming, Mobile Communications, Online Services.

Paul is the COO and co-founder of kwiboo (http://www.kwiboo.com/) and is also the creator of GeekZilla.

Comments

marshp3 said:

Excellent sample, really easy to use and well explained by this article.

I'll be using this in my latest project.

Thanks

17/Oct/2006 23:06 PM

Henrik said:

The control is all good. You could consider adding this in the web.config:

Also, the control renders invalid markup. For example, using unordered lists like you have in your article: an element of type ul that is the child of another element of type ul, must be the grandchild of it. I.e. you "cannot place ul elements outside li elements". Try to validate your mark-up, and you'll see. I guess this is because of the composition of the template controls... If you could provide a solution to this, I'd be very grateful, as your control is already great.

Also, the depth doesn't work backwards. Given a list L with a child list C, a list-item of L, inserted as a sibling after C, will have depth+{the number of child lists preceding it} as its depth property.

Simply add this, in the very end of your recursive NestControls method:

<code>currentDepth--;</code>

31/Oct/2006 11:01 AM

GeekZilla