Extending the default Pager control

Extending the default Pager control

December 14, 2011 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

The stock Pager control has nice features, but sometimes you need to add additional functionality to it, or simply change the way it looks. This can be achieved very easy by inheriting from the base Telerik.Sitefinity.Web.UI.Pager class. In this blog post I will customize the pager in a way that will hide its Previous and Next buttons, will display only a list of available pages and the following text above:

Page 3 or 9

where 3 is the current page and 9 is the total number of pages.

We'll need 3 files for that - Pager.cs, Pager.js and Pager.ascx. The C# class is a pretty simple control:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace CustomPager
{
    public class Pager : Telerik.Sitefinity.Web.UI.Pager
    {
        #region Properties
 
        /// <summary>
        /// Gets the name of the layout template.
        /// </summary>
        /// <value>The name of the layout template.</value>
        protected override string LayoutTemplateName
        {
            get
            {
                return "CustomPager.Resources.Pager.ascx";
            }
        }
 
        /// <summary>
        /// Gets or sets the layout template path.
        /// </summary>
        /// <value>The layout template path.</value>
        public override string LayoutTemplatePath
        {
            get
            {
                return "~/CustomPager/CustomPager.Resources.Pager.ascx";
            }
            set
            {
                base.LayoutTemplatePath = value;
            }
        }
 
        #endregion
 
        #region Overrides
 
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
 
            var currentPage = this.Container.GetControl<Literal>("currentPage", true);
            if (currentPage != null)
            {
                currentPage.Text = this.CurrentPage.ToString();
            }
 
            var pagesCount = this.Container.GetControl<Literal>("pagesCount", true);
            if (pagesCount != null)
            {
                var pageCount = (int)Math.Ceiling((double)this.VirtualItemCount / this.PageSize);
 
                pagesCount.Text = pageCount.ToString();
            }
        }
 
        public override IEnumerable<ScriptReference> GetScriptReferences()
        {
            var scripts = new List<ScriptReference>();
            scripts.Add(new ScriptReference
            {
                Assembly = typeof(Telerik.Sitefinity.Web.UI.Pager).Assembly.GetName().ToString(),
                Name = "Telerik.Sitefinity.Web.Scripts.Pager.js"
            });
 
            scripts.Add(new ScriptReference
            {
                Assembly = this.GetType().Assembly.GetName().ToString(),
                Name = "CustomPager.Resources.Pager.js"
            });
 
            return scripts;
        }
 
        #endregion
    }
}

 

We override the OnPreRender and GetScriptReferences methods where we register our custom JavaScript and implement our custom logic. The .ascx template for our Pager looks like this:

<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
  
<sf:SitefinityHyperLink ID="cmdFirst" runat="server" Visible="false" />
<sf:SitefinityHyperLink ID="cmdLast" runat="server" Visible="false" />
  
<ul class="pager">
    <li>
        <sf:SitefinityHyperLink ID="cmdPrev" runat="server" CssClass="pager-previous" Text="« Previous" /></li>
    <li>
        <div class="pager-pg-numbers">
            <p>Page <asp:Literal runat="server" id="currentPage"></asp:Literal> of <asp:Literal runat="server" id="pagesCount"></asp:Literal></p>
            <div runat="server" id="numeric" class="sf_pagerNumeric"></div>
        </div>
    </li>
    <li>
        <sf:SitefinityHyperLink ID="cmdNext" runat="server" CssClass="pager-next" Text="Next »" /></li>
</ul>

 

You see we hide the First and Last links and we add 2 new liters - currentPage and pagesCount - that will be set dynamically in the OnPreRender method.

The JavaScript file is pretty simple:

Type.registerNamespace("Telerik.Sitefinity.Web.UI");
Type.registerNamespace("CustomPager");
  
CustomPager.Pager = function (element) {
    CustomPager.Pager.initializeBase(this, [element]);
}
  
CustomPager.Pager.prototype = {
    initialize: function () {
        CustomPager.Pager.callBaseMethod(this, "initialize");
    },
  
    dispose: function () {
    }
};
  
CustomPager.Pager.registerClass("CustomPager.Pager", Telerik.Sitefinity.Web.UI.Pager);

 

You can add any additional client-side logic to this template if you wish. The JavaScript and .ascx files must be put in a subfolder named Resources and marked as Embedded Resources in your project.

We're almost ready with our Pager. All we need to do is register our custom Virtual Path Provider - go to Administration -> Settings -> Advanced -> VirtualPathSettings -> Virtual paths -> Create new and add the following settings:

VirtualPath - ~/CustomPager/*
ResourceLocation - CustomPager
ResolverName - EmbeddedResourceResolver

Save the changes, restart the application and now we're ready to use our new pager. Drop a News widget on a page, click Edit and for example set it to use paging with 1 item per page. Make sure you have at least 2-3 News items. In the List Settings tab select a List template and edit it. Add the following registration on top:

<%@ Register TagPrefix="custom" Namespace="CustomPager" Assembly="CustomPager" %>

 

Then on the bottom replace the default Pager registration with our custom:

<custom:Pager id="pager" runat="server"></custom:Pager>

 

Save and publish the page and you can now see the new Pager in action.

Attached to this post is an archive with the complete solution - CustomPager.zip.

 

progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments
Comments are disabled in preview mode.
Topics
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
New_Mobile_Dev_Ebook_Progress_Website_Thumbail
The New Mobile Development Landscape
Download Whitepaper
 
IDC Spotlight Sitefinity Thumbnail
Choosing the Right Digital Experience Platform to Improve Business Outcomes
Download Whitepaper
 
TheFastestWayToBuildMobileAppsArtboard-2
The Fastest Way to Build Mobile Apps With Cloud Data
Watch Webinar