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

Show Pager on Top and Bottom

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.

Open In Dojo
<div id="grid"></div>
<script>
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/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>
In this article