Telerik UI for Windows 8 HTML

RadPagination for Windows 8 is an HTML/JavaScript component that uses lightweight HTML rendering that maximizes loading performance, yet keeps the control flexible when changing styles and layout is required.

HTML Output

RadPagination renders four main parts - the "previous" button, the "next" button, the thumbnails list and the label. Here is the HTML output of a sample RadPagination instance showing four available pages, with the first one selected:

Pagination Output Copy imageCopy
<div class="t-pagination" data-win-control="Telerik.UI.RadPagination">
    <button class="t-button t-prev"></button>
    <button class="t-button t-next"></button>
    <div class="t-thumbnails t-default">
        <ul>
            <li class="t-selected">
                <div class="t-item"></div>
            </li>
            <li class="t-after-selected">
                <div class="t-item"></div>
            </li>
            <li>
                <div class="t-item"></div>
            </li>
            <li>
                <div class="t-item"></div>
            </li>
        </ul>
    </div>
    <span class="t-label">
        <span>1</span>
        <span>/</span>
        <span>4</span>
    </span>
</div>

CSS Classes

RadPagination uses the following CSS classes on its HTML elements:

CSS class/selector

Target HTML element / Description

.t-pagination

The HTML host element that defines the data-win-control attribute.

.t-pagination .t-button

The prev/next button.

.t-pagination .t-button.t-prev

The previous page button.

.t-pagination .t-button.t-next

The next page button.

.t-pagination .t-thumbnails

The thumbnails list.

.t-pagination .t-thumbnails.t-default

The thumnbails list with default rendering (no user-defined template).

.t-pagination .t-thumbnails.t-custom

The thumnbails list with a custom user-defined template.

.t-pagination .t-thumbnails .t-item

A thumbnail item with default (no template) rendering.

.t-pagination .t-thumbnails .t-item.t-selected

The selected list item.

.t-pagination .t-thumbnails .t-item.t-after-selected

The item immediately to the right of the selected item.

.t-pagination .t-label

The page index label.

.t-pagination.t-disabled, .t-pagination .t-thumbnails.t-disabled

Applied to the host HTML element (.t-pagination) and the thumbnails list element (.t-thumbnails) when the control is disabled.

See Also