Customize Sitefinity pager rendering

The following blog post will provide you step-by-step solution to modify the rendering of the default pager used in Sitefinity.

Defining the problem

By default sf:Pager control renders several div tags with anchor elements as children. This is a horror for front-end developers who would like to put some additional styling to the control. In many cases you would like to change the rendering to contain unordered list items and anchors. See the sample below:

Default rendering:

<div class="pagination">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
</div>

Desired result:

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Solution plan

Most of you will go through customizing the pager template using the ViewMap as described in official Sitefinity blogs. This will be the best solution as all pager instances, regardless of the module (News, Events, Blogs etc) will have consistent layout. However soon you will realize that all anchor tags are created programmatically in the Telerik.Sitefinity.Web.UI.Pager class in a private method that cannot be overriden and the fact that the div with id numeric is used to add child anchors to.

Solution

Without a single line of a C# code!

Create new .ascx file to be the custom template used to map the sf:Pager control with ViewMap. Put the following code in the file:

<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

 <sf:SitefinityHyperLink ID="cmdFirst" runat="server" Text="<%$Resources:Labels, Paging_First %>" />
 <sf:SitefinityHyperLink ID="cmdPrev" runat="server" Text="<%$Resources:Labels, Paging_Prev %>" />
  <div runat="server" id="numeric1" class="sf_pagerNumeric pagination">
    <ul id="numeric" runat="server">
    </ul>
  </div>
  <sf:SitefinityHyperLink ID="cmdNext" runat="server" Text="<%$Resources:Labels, Paging_Next %>" />
  <sf:SitefinityHyperLink ID="cmdLast" runat="server" Text="<%$Resources:Labels, Paging_Last %>" />

What is the difference?

New unordered list is added to the template with id="numeric" which will not confront to the logic in the class file that adds anchor tags to the Container element with id="numeric".

The only thing that is left is to wrap all anchor tags with li elements to form the desired rendering. This is achieved by simple jQuery in the custom pager template:

<script type="text/javascript">
$(document).ready(function () {
    $('div.sf_pagerNumeric ul a').each(function () {          
        $(this).wrap("<li></li>");
    });
});

Voila!

The result is achieved.

Veronica Milcheva

About Veronica Milcheva

I am a passionate Sitefinity blogger, developer and consultant. In my spare time I enjoy running and listening to music. My personal quote: There's no tough problem, just not enough coffee :)

View Comments

comments powered by Disqus