Show Pager on Top and Bottom

Updated on Dec 10, 2025

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	Created with version 2018.1.117

Description

How can I show the pager in the Grid both above and below the items?

Solution

The following example demonstrates how you can duplicate and add the Pager above the Grid items.

Example

View Source

<div id="grid"></div>
<script>
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: "https://demos.telerik.com/service/v2/core/Customers"
                },
                pageSize: 20
            },
            height: 550,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });


        var grid = $("#grid").data("kendoGrid");
        var wrapper = $('<div class="k-pager k-grid-pager pagerTop"/>').insertBefore(grid.element.children(".k-grid-header"));
        grid.pagerTop = new kendo.ui.Pager(wrapper, $.extend({}, grid.options.pageable, { dataSource: grid.dataSource }));
        grid.element.height("").find(".pagerTop").css("border-width", "0 0 1px 0");
    });
</script>