Creating dynamic menus in EPiServer

Wednesday, February 10th, 2010 | .NET

My first post in almost a year! What is going on! "Been busy, things are happening, blah blah blah"…no excuse, really. I signed up for twitter almost a year ago, and I think I lost some focus in the blogging sphere. Anyway, this first post in 2010 is about EPiServer, the best CMS out there today!

The challenge

I want to create a more dynamic page tree than the standard EPiServer PageTree. More like an Accordion panel which has 2 or 3 levels (doesn't matter) and all available nodes are expanded by default. The real challenge is to get the whole page tree with all nodes expanded (not only the nodes which are selected) and setting correct class on the expanded items. Whether this is an accordion or another cool menu script is all the same.

The Solution

Start out with the default PageTree control in EPiServer controls.

<EPiServer:PageTree ID="PageTreeLeftMenu" runat="server" ExpandAll="true" NumberOfLevels="2">
<HeaderTemplate>
<div class="leftmenu"> <!– Header –>
</HeaderTemplate>
<IndentTemplate>
<ul> <!– Indent –>
</IndentTemplate>
<ItemHeaderTemplate>
<li <%# GetExpandedClass(Container.DataItem) %>>
</ItemHeaderTemplate>
<ExpandedTopTemplate>
<EPiServer:Property PropertyName="PageLink" runat="server" /> <!– ExpandedTop –>
</ExpandedTopTemplate>
<SelectedExpandedTopTemplate>
<EPiServer:Property PropertyName="PageLink" runat="server" CssClass="selected" /> <!– SelectedExpandedTop –>
</SelectedExpandedTopTemplate>
<ExpandedItemTemplate>
<EPiServer:Property PropertyName="PageLink" runat="server" /> <!– ExpandedItem –>
</ExpandedItemTemplate>
<SelectedExpandedItemTemplate>
<EPiServer:Property PropertyName="PageLink" runat="server" CssClass="selected" /> <!– SelectedExpandedItem –>
</SelectedExpandedItemTemplate>
<ItemFooterTemplate>
</li>
</ItemFooterTemplate>
<UnindentTemplate>
</ul> <!– UnIndent –>
</UnindentTemplate>
<FooterTemplate>
</div> <!– Footer –>
</FooterTemplate>
</EPiServer:PageTree>


 

Things to notice:

"ExpandAll" is set to true. This will dump the whole tree, not just the nodes which are selected by the user.
Only the *Expanded* templates are in use for Top and Item (ie.ExpandedTopTemplate). When using "ExpandAll" these are the templates used, not the regular Top Template and ItemTemplate.
<%# GetExpandedClass(Container.DataItem) %> – This is the magic for setting the correct style on the expanded items. In addition there is a "selected" class on the selected menu item

The Codebehind looks like this:

protected void Page_Load(object sender, EventArgs e)
{
PageTreeLeftMenu.PageLink = LeftMenuPageLink;
PageTreeLeftMenu.DataBind();
}
 
protected PageReference LeftMenuPageLink
{
get
{
PageReference leftMenuPageLink = CurrentPage["LeftMenuRoot"] as PageReference;
return leftMenuPageLink;
}
}
 
protected string GetExpandedClass(object dataItem)
{
PageData page = dataItem as PageData;
if (page != null && PageTreeLeftMenu.OpenPages.Contains(page.PageLink))
return "class=\"expanded\"";
return string.Empty;
 
}

Things to notice:

LeftmenuPageLink is just an example on how to set the start point for the left menu.
GetExpandedClass is the method that sets the correct class on the <li>. This is done by checking if the page in the tree is available in PageTree.OpenPages. This is what makes it possible to make the dynamic menu. If the OpenPages method was not available, it would not be possible to highlight the expanded nodes without traversing each node or doing some javascripting.

The output should look something like this

<div class="leftcolumn">
<div class="leftmenu">
<!– Header –>
<ul>
<!– Indent –>
<li class="expanded"><a href="/en/Consulting/">Consulting</a>
<!– ExpandedTop –>
<ul>
<!– Indent –>
<li class="expanded"><a class="selected" href="/en/Consulting/Business-Consulting-/">
Business Consulting </a>
<!– SelectedExpandedItem –>
</li>
<li><a href="/en/Consulting/Project-and-Test-Management/">Project and Test
Management</a>
<!– ExpandedItem –>
</li>
<li><a href="/en/Consulting/IT-Consulting/">IT Consulting</a>
<!– ExpandedItem –>
</li>
<li><a href="/en/Consulting/Application-Development/">Application Development</a>
<!– ExpandedItem –>
</li>
</ul>
<!– UnIndent –>
</li>
<li><a href="/en/Solutions/">Solutions</a>
<!– ExpandedTop –>
<ul>
<!– Indent –>
<li><a href="/en/Solutions/ERP/">ERP</a>
<!– ExpandedItem –>
</li>
<li><a href="/en/Solutions/Content-Management/">Content Management</a>
<!– ExpandedItem –>
</li>
<li><a href="/en/Solutions/Oil-and-Gas/">Oil and Gas</a>
<!– ExpandedItem –>
</li>
<li><a href="/en/Solutions/Industry/">Industry</a>
<!– ExpandedItem –>
</li>
<li><a href="/en/Solutions/E-Business/">E-Business</a>
<!– ExpandedItem –>
</li>
<li><a href="/en/Solutions/Banking–Finance-Suite/">Banking &amp; Finance
Suite</a>
<!– ExpandedItem –>
</li>
<li><a href="/en/Solutions/Public-Sector-Suite/">Public Sector Suite</a>
<!– ExpandedItem –>
</li>
</ul>
<!– UnIndent –>
</li>
<li><a href="/en/Outsourcing/">Outsourcing</a>
<!– ExpandedTop –>
<ul>
<!– Indent –>
<li><a href="/en/Outsourcing/ITO/">ITO</a>
<!– ExpandedItem –>
</li>
<li><a href="/en/Outsourcing/Applications-Management/">Applications Management</a>
<!– ExpandedItem –>
</li>
</ul>
<!– UnIndent –>
</li>
<li><a href="/en/TestTest/">TestTest</a>
<!– ExpandedTop –>
</li>
<li><a href="/en/TestTestTest/">TestTestTest</a>
<!– ExpandedTop –>
</li>
</ul>
<!– UnIndent –>
</div>
<!– Footer –>
</div>

The result will look something like this:

After adding the Accordion script, the Top items should collapse and only the expanded section should be visible. When moving the mouse over another section it should expand, but not highlight. The final result will look something like this.

Conclusion

Using dynamic menus could give the visitor a better experience. Whether its an Accordion panel or some other fancy scripted menu doesn't matter. Anyway you will have to dump the whole tree to a certain level (2 levels in this example) and set the correct classes on the elements to get the styling correct. The magic is the "PageTree.OpenPages" method which helps a lot in this scenario.

1 Comment to Creating dynamic menus in EPiServer

Øyvind
February 11, 2010

Good to have you back blogging.

Search

Knut Hamang

This is the official site for Knut Hamang. I am a professional technical consultant specialized in Microsoft and .NET technologies and platforms. I work as an independent consultant in Norway and have more than 10 years of professional experience. To get in contact with me, please send me an email or check my public profile on

hamang.net

- the everyday life