Page Nevigation on Top and Bottom

[Jimmy]

Hi

I found some old sample code of placing page navigation on the top of the grid, but none work correctly when i have a ClientFooterTemplate in the grid.

It show the footer template instead of the pager.

Can anyone help?

        var grid = $('#grid').data('kendoGrid');
        var wrapper = $('<div class="k-pager-wrap k-grid-pager pagerTop"/>').insertBefore(grid.element.children("table"));
        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");

 

[Tsvetomir]

Hi Jimmy,

I have noticed that the used selector grid.element.children("table")  target the content within the div HTML element which wraps the grid. The ClientFooterTemplate is prepended to all of the pagers within the grid. What I can suggest is to alternate the selector as follows:

$(function () {
    var grid = $("#grid").data("kendoGrid");
    var wrapper = $('<div class="k-pager-wrap k-grid-pager pagerTop"/>').insertBefore(".k-grid");
    grid.pagerTop = new kendo.ui.Pager(wrapper, $.extend({}, grid.options.pageable, { dataSource: grid.dataSource }));
})

This would create a distinct pager widget right on top of the grid.


Kind regards,
Tsvetomir
Progress Telerik

[Jimmy]

It Works! Thanks Tsvetomir!