Telerik UI for Windows 8 HTML

RadPagination for Windows 8 is a HTML/JavaScript component that attaches to pageable content presenter controls on your page. Currently, only WinJS.UI.FlipView is supported out-of-the box.

This topic contains the following sections.


Before you declare a Telerik control in your application, make sure that you have added the references to the needed JavaScript and CSS resources, as described here:

Adding Telerik UI for Windows 8 HTML to an HTML Page

Creating a Pagination

To add a RadPagination control in the HTML markup, add an empty div element with a data-win-control attribute and a value of Telerik.UI.RadPagination:

HTML Copy imageCopy
<div data-win-control="Telerik.UI.RadPagination">

Alternatively, you can instantiate RadPagination programmatically by defining an empty div element with an id attribute and using the Telerik.UI.RadPagination control constructor in JavaScript:

HTML Copy imageCopy
<div id="myPagination">
JavaScript Copy imageCopy
var pagination = new Telerik.UI.RadPagination(document.getElementById("myPagination"));

Defining a RadPagination without setting any properties will not result in a usable control. Moreover, RadPagination needs to be associated with a pageable control like WinJS.UI.FlipView to function properly. You can find more information regarding how this is done in this article: RadPagination configuration options

Setting Pagination Options

Just like any other Windows Runtime JavaScript control, RadPagination control options can be defined through the data-win-options attribute:

HTML Copy imageCopy
<div data-win-control="Telerik.UI.RadPagination" data-win-options="{showButtons:'false'}">

Alternatively, you can programmatically pass an options object as a second argument to the control constructor:

JavaScript Copy imageCopy
var pagination = new Telerik.UI.RadPagination(document.getElementById("myGauge"), { showButtons: false });

To see all available configuration options in the API, click to go to RadPagination

Accessing and Modifying RadPagination

You can get ahold of the RadPagination object the same way as the native WinJS components—find its DOM element and access its winControl property.

JavaScript Copy imageCopy
var pagination = document.getElementById("myPagination").winControl;

Once you have a reference to the control, you can modify its properties as required:

JavaScript Copy imageCopy
pagination.decimals = 3;
pagination.showButtons = false;

See Also