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.