EPiServer:PageList with SelectedItemTemplate

This is a quick guide how to extend EPiServer:PageList with a SelectedItemTemplate. This is a good start if you want to try to extend it with a SeparatorTemplate or something more spectacular.

1. Create a class
I.e. PageList.cs, a recommendation is to follow EPiServers namespace, so in this case I would create my class in Antecknat.Web.WebControls.
This class should inherit EPiServer.Web.WebControls.PageList

namespace Antecknat.Web.WebControls
public class PageList : EPiServer.Web.WebControls.PageList

2. Create the SelectedItemTemplate
This is done by the following code:

private ITemplate _selectedItemTemplate;
[TemplateContainer(typeof(PageTemplateContainer)), Browsable(false), PersistenceMode(PersistenceMode.InnerProperty)]
public ITemplate SelectedItemTemplate
return this._selectedItemTemplate;
this._selectedItemTemplate = value;

3. Modify CreateChildControls()
With Reflector (the best program ever made?) we can reuse the way controls are added to the regular PageList. We need to change the current method so that the SelectedItemTemplate is used when is supposed to.
In this case I want the current page, the parent page, the parents parents page and so on to count as selected. So we’ll make a PageReferenceCollection containing these pages.

// Find pages that should be marked as Selected
PageReferenceCollection prcActivePages = new PageReferenceCollection();
PageReference prCurrentLevel = CurrentPage.PageLink;
while (prCurrentLevel != null && prCurrentLevel != PageReference.EmptyReference)
prCurrentLevel = EPiServer.DataFactory.Instance.GetPage(prCurrentLevel).ParentLink;

And where the regular ItemTemplate is added, we change the code from:



if (prcActivePages.Contains(pages[i].PageLink)) // Add to SelectedItemTemplate if in Selected collection
else // Add to normal ItemTemplate

4. Change web.config
This is not a mandatory step, but if you always want to be able to use your fresh PageList from any aspx or ascx in the project, add teh following line in <system.web><pages><controls>

<add tagPrefix="Antecknat" namespace="Antecknat.Web.WebControls" assembly="Antecknat"/>

5. Use your PageList
Now you can use your PageList in your .aspx and .ascx files.
Just type

<Antecknat:PageList ID="PageList1" runat="server>
<ItemTemplate><li><%# Container.CurrentPage.PageName %></li>
<SelectedItemTemplate><li class="selected"><%# Container.CurrentPage.PageName %></li>

And then add a PageDataCollection from code behind and databind it.

Download sourcecode

1,867 thoughts on “EPiServer:PageList with SelectedItemTemplate

  1. Karl

    I’m having some real difficulties with this.

    No matter how hard I try, and how much I copy and paste, I can’t get this to work!

    It doesn’t need to be compiled does it?

    Also, where have you put it in your filesystem?

    Every time I try to do this, I get told in my aspx page that my control isn’t a known element!

    Any ideas?

  2. Karl

    Not to worry, I was naming the assembly something else!

    Schoolboy error!

    Thanks very much for the control by the way! 🙂

  3. Pingback: EPiServer Developer Resources | Frederik Vig - ASP.NET developer

Comments are closed.