+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Extending the default Pager control

by Liubomir Velkov

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.

 

Leave a comment