EPiServer web controls: PageList

Posted on July 20, 2009 by Frederik Vig in EPiServer

The PageList control is very similar to other data controls you’re familiar with, like the Repeater. It has a few cool built in features that make it easier to use in certain scenarios. For instance, you can easily filter the data and add paging to it.

Below are the template options it offers.

A nice blog post explaining how to create your own ItemDataBound template (like the Repeater and Listview have): EPiServer:PageList with ItemDataBound.

A few of the most used public properties of the PageList class.

The SortOrder is by default set after the container pages Sort order.

For reference, this is a build in EPiServer property called PageChildOrderRule.

Examples

Simply listing all the child pages of the start page

<EPiServer:PageList runat="server" ID="MyPageList">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate><li><EPiServer:Property runat="server" PropertyName="PageLink" /></li></ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</EPiServer:PageList>
 
protected override void OnLoad(System.EventArgs e)
{
    base.OnLoad(e);
    this.MyPageList.PageLink = PageReference.StartPage;
}

With paging

<EPiServer:PageList runat="server" ID="MyPageList" Paging="true" PagesPerPagingItem="10">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate><li><EPiServer:Property runat="server" PropertyName="PageLink" /></li></ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</EPiServer:PageList>

Paging with the EPiServer PageList control

The HTML markup rendered is bad.

<div class="PagingContainer">
	<a id="ctl00_MainRegion_MyPageList_ctl13_PagingID3" class="SelectedPagingItem" title="Current page" href="javascript:__doPostBack('ctl00$MainRegion$MyPageList$ctl13$PagingID3','')">1</a><span> </span>
<a id="ctl00_MainRegion_MyPageList_ctl13_PagingID4" class="UnselectedPagingItem" title="Page 2" href="javascript:__doPostBack('ctl00$MainRegion$MyPageList$ctl13$PagingID4','')">2</a>
<span> </span>
<a id="ctl00_MainRegion_MyPageList_ctl13_PagingID5" class="UnselectedPagingItem" title="Next page" href="javascript:__doPostBack('ctl00$MainRegion$MyPageList$ctl13$PagingID5','')">></a>
<span> </span>
<a id="ctl00_MainRegion_MyPageList_ctl13_PagingID6" class="UnselectedPagingItem" title="Last page" href="javascript:__doPostBack('ctl00$MainRegion$MyPageList$ctl13$PagingID6','')">ยป</a>
</div>

The links won’t work without JavaScript (users without JavaScript enabled, like search engines, won’t be able to get to the content). For a solution on this see my post: Creating a Custom EPiServer Paging Control.

Filtering the data

The PageList has a filter event you can use to filter the data. In this example we’re filtering out all the pages that do not have a PageName that starts with the letter A

private void MyPageList_Filter(object sender, FilterEventArgs e)
{
    var pages = e.Pages;
 
    for (int i = pages.Count - 1; i > -1; i--)
    {
	if (!pages[i].PageName.ToUpper().StartsWith("A"))
	{
	    pages.RemoveAt(i);
	}
    }
}

And then you need to assign the event to the event method.

this.MyPageList.Filter += new EPiServer.Web.WebControls.FilterEventHandler(MyPageList_Filter);

Other posts in this series

Related Posts: