Telerik UI for Windows 8 HTML

By default, RadPagination displays simple thumbnails giving a quick visual indication of the current page among all pages. The content of the thumbnails can be customized through the use of templates. Similar to the WinJS.UI.FlipView control, RadPagination provides the itemTemplate property that can be used to specify the custom thumbnail template.

During data binding, the template in RadPagination is data-bound to the paged control's own data source. Any data properties from the FlipView.itemDataSource are available inside the Pagination templates. This enables a wide range of visualization scenarios, where the FlipView data determines what the thumbnails of the Pagination show.

Defining an Item Template

A template can be specified in a variety of ways in RadPagination. The itemTemplate property accepts the following different types of values:

  • An instance of WinJS.Binding.Template.

  • An HTML element hosting an instance of WinJS.Binding.Template (identical to Microsoft native controls).

  • A string value representing HTML to be generated along with data-binding expressions (e.g. "<span>#= title #</span>").

  • A function that returns an HTML element.

  • A function that returns an HTML string.

Below you can find samples for the main templating scenarios. They all result in the following combination of flipview and pagination controls:

Providing an item template

Using the WinJS.BindingTemplate

You can use a WinJS binding template for the RadPagination control just like with any other control:

Using the WinJS.BindingTemplate Example Copy imageCopy
<div id="flipViewItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <img src="#" data-win-bind="src: picture; alt: title " style="margin-right: 30px" />
    <h2 data-win-bind="innerText: title"></h2>
</div>

<div id="paginationTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <img class="thumbitem" src="#" data-win-bind="src:thumb;" />
</div>

<div id="flipView1" style="height: 250px" data-win-control="WinJS.UI.FlipView" data-win-options="{ 
    itemDataSource: DefaultData.bindingList.dataSource, 
    itemTemplate: select('#flipViewItemTemplate') 
}">
</div>
<div id="pagination1" data-win-control="Telerik.UI.RadPagination" data-win-options="{
    pageProvider: select('#flipView1'),
    itemTemplate: select('#paginationTemplate')
}">
</div>

Returning a Template from a JavaScript Function

The sample below shows how to dynamically create a FlipView and a RadPagination control, along with their templates. Note the difference in the objects that the controls pass to the templating function. FlipView passes a WinJS.Promise object for the item that is about to render (read more here ). RadPagination sends the actual item with its binding context.

Control Definition Copy imageCopy
var flipView = new WinJS.UI.FlipView(document.getElementById("flipView2"), {
    itemDataSource: DefaultData.bindingList.dataSource,
    itemTemplate: PaginationTemplatesSample.getFlipViewTemplate
});

var pagination = new Telerik.UI.RadPagination(document.getElementById("pagination2"), {
    pageProvider: document.getElementById("flipView2").winControl,
    itemTemplate: PaginationTemplatesSample.getPaginationTemplate
});
Template Functions Copy imageCopy
getFlipViewTemplate: WinJS.Utilities.markSupportedForProcessing(function (itemPromise) {
    return itemPromise.then(function (item) {
        var element = document.createElement("div");
        element.innerHTML =
        "<img  src='" + item.data.picture + "' alt='" + item.data.title + "' style='margin-right: 30px' /> " +
        "<h2>" + item.data.title + "</h2>";
        element.style.display = "-ms-flexbox";
        element.style.msFlexAlign = "center";
        return element;
    });
}),

getPaginationTemplate: WinJS.Utilities.markSupportedForProcessing(function (item) {
    var templateHolder = document.createElement("div");
    templateHolder.innerHTML = "<img  src='" + item.thumb + "' alt='" + item.title + "' />";
    return templateHolder;
})

Using a String with Binding Expressions

You can set a simple string as an item template for the pagination. It can use binding expressions to populate the rendered HTML with values from the item's binding context.

Note

If you specify the template in HTML, you may need to use HTML-encoded characters to get matching quotation marks. In this case you will need to replace the quotations in the template value shown below with a matching HTML entity.

Using a String with Binding Expressions Example Copy imageCopy
<div id="flipView3" style="height: 250px" data-win-control="WinJS.UI.FlipView" data-win-options="{ 
    itemDataSource: DefaultData.bindingList.dataSource, 
    itemTemplate: select('#flipViewItemTemplate') 
}">
</div>
<div id="pagination" data-win-control="Telerik.UI.RadPagination" data-win-options="{
    pageProvider: select('#flipView3'),
    itemTemplate: '<div> <img src="#=thumb#" alt="#=title#" /> </div>'
}">
</div>

In all above samples, DefaultData.bindingList is of type WinJS.Data.List and is defined like this for the purpose of the example:

Sample Data Copy imageCopy
WinJS.Namespace.define("DefaultData", {
    bindingList: new WinJS.Binding.List([
    {
        type: "item",
        title: "Soft Drink",
        picture: "/images/food/1.jpg",
        thumb: "/images/thumbs/1.jpg"
    },
    //...