New to Kendo UI for jQuery? Download free 30-day trial

Show Pager on Top and Bottom


Product Progress Kendo UI Grid
Progress Kendo UI version Created with version 2018.1.117


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


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

<div id="grid"></div>
    $(document).ready(function () {
            dataSource: {
                type: "odata",
                transport: {
                    read: ""
                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-wrap 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");
In this article
Not finding the help you need? Improve this article