Knowledge is power. We love to share it.

News related to Mono products, services and latest developments in our community.


How to: Create a custom pager template

03/04/2011Categories: MonoX
Paging is one of the most common tasks developers are faced with when working with repeatable Web controls - list, repeaters, grids, ...  In situations where large chunks of information is presented to the user, it is essential to break it into multiple pages. By now you may be thinking that this is an old topic - it is easily achievable with a little help from ASP.NET controls and today's databases and ORMs.

MonoX gives you two basic pager templates - one that works with SEOized URLs (that works in URLs looking like this: .../some/page/page/1/ or similar), and the other that uses URL query parameters (mypage.aspx/page=1). SEO-enabled pagers are used more often, although they may require some URL rewriting action. Both pager templates can be used with Ajax, and they covers most of the scenarios... but not all. Recently we got a request from a developer that wanted to implement a Facebook-style paging functionality in his wall part. I'm sure you are familiar with it: comments are initially hidden (or you have just a few displayed), and each click on the pager reveals a new set of data that is appended to the end of previously displayed items. Of course, everything works without postbacks.

Here is how to do the same thing with MonoX comments Web part and our new pager template, called "DynamicPagerTemplate".

Before you start implementing custom pager template we advise you to read the following articles and familiarize yourself with the terms and concepts that we will use in this tutorial:

Pager template mark-up

Let's start by adding a new UserControl mark-up file (.ascx) to our theme template folder (MonoX default folder is "/App_Templates/Default/PagerTemplates/"), called "DynamicPager.ascx". To build a Facebook-style template we will need two things in our ASCX file:

A storage control that will hold the state so we will know what page to show
A paging control that will enable our users to click and see more comments

Our mark-up code will look like this:

<div class="pager"
    <asp:HiddenField ID="fieldState" runat="server" Value="0" />
    <asp:LinkButton id="lnkMore" runat="server" Text="View more" CommandName="NumericPage" CommandArgument='<%# Pager.CurrentPageIndex + 1 %>' >

We will use the MonoX Default theme to benefit from the existing design, and we will wrap all of our controls within "DIV" tag with a "pager" class. We will use "fieldState" to maintain the "PageSize" state, and "lnkMore" to trigger the "View more" action. Note that the  "CommandName" attribute is added to the LinkButton so standard pager  command event will be triggered, while "CommandArgument" is used to pass the page number information.

Pager template code-behind

Our code-behind class inherits from "MonoSoftware.MonoX.Controls.MonoXPagerTemplate" that will provide us with the basic template functionality and a "Pager" reference. Note that we will not use a partial class codebehind since we are inheriting directly from the "MonoSoftware.MonoX.Controls.MonoXPagerTemplate". Therefore we need to manually declare the "fieldState" and "lnkMore" controls, so we can use them in our code.
protected override void OnInit(EventArgs e)
    this.Pager.PageIndexChanging += new PageChangingEventHandler(Pager_PageIndexChanging);
    this.Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);
void Pager_PageIndexChanging(object source, PageChangingEventArgs e)
    this.Pager.PageSize = Convert.ToInt32(fieldState.Value) + this.Pager.PageSize;
    e.NewPageIndex = 0;
void Page_PreRenderComplete(object sender, EventArgs e)
    fieldState.Value = this.Pager.PageSize.ToString();

We are using the "PageSize" property as the value for the increment -  after we set the new "PageSize" value, we are resettingt the "NewPageIndex". In essence this is a trick that causes the pager to stay on the same  (first) page all the time, while constantly increasing the size of the page to display.  The "PageSize" has to be saved to our state persister field called  "fieldState". Please note that we used a "HiddenField" as state persister because ViewState isn't available in this scenario as we are dealing with dynamically created controls (the control hierarchy is changing on every "View more" action).

Putting the template in use

We are now ready to to put the pager template in use by the "WallNotes" Web part. You can do this in several different ways:

Set the "Pager template name for comments:" via the personalization property

Set the "PagerTemplateNameComments" in the Web page mark-up code

<MonoX:Wall runat="server" ID="snWallNotes" UsePrettyPhoto="false" ShowRating="false" GravatarRenderType="NotSet" PagerTemplateNameComments="DynamicPager"   />

Set the "PagerTemplateNameComments" in the code-behind

protected void Page_Init(object sender, EventArgs e)
    snWallNotesPagerTemplateNameComments = "DynamicPager";

Note that this is work in progress, and is not included in the official release of MonoX.
This tutorial is relevant to MonoX CMS version 4.0.2440.35 and later.
Rated 4.50, 2 vote(s).