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.
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.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.