Show pagination and records count on both top and bottom of kendo grid

0
votes

I need to display the pagination and records count in both top and bottom of my Kendo Grid. I'm using jQuery KendoGrid.

Current grid contains pagination | records per page dropdown | and records count, on bottom of the grid. I want to show pagination and records count in top of the grid also.

What I try

I try somethig like this. In data bound event, I try to clone the bottom div and append it to top of the grid.

        var grid = $("#grid");
        var topBar = grid.find(".k-grid-pager").clone();
        topBar.find('span.k-pager-sizes').remove();
        topBar.find('a.k-pager-refresh').remove();
        topBar.insertBefore(grid.children(".k-grouping-header"));

Problem

the bottom div recreated in top of grid, but the pagination functionality is not there, and the records count is not updating . its shows the value on the fist load only.

Is there any other neat way to show this on both top and bottom of the page ???

2
jquerykendo-grid

2 Answers

1
votes

No there is not, there are several workaround's but all involve custom css/jquery changes.

You can have a look here: http://www.kendoui.com/forums/ui/grid/location-of-pagination-numbers.aspx or here kendoui:grid - set pager on top and bottom of the grid where there is also a demo in the answers

0
votes

I implemented like this

//Add pager and records count to grid top START
bindPagingToGridTop = function (grid, needRefresh) {
var pager = grid.find(grid.children(".k-grid-header")).before("<div id='divGridTopPager' class='k-pager-wrap k-grid-pager'></div>");

pager = $("#divGridTopPager").kendoPager({
    dataSource: grid.data("kendoGrid").dataSource,
    refresh: needRefresh ? true : false,
    buttonCount: 5
});
}
//Add pager and records count to grid top END

and I call it in the databound of grid.(call it when the grid load for the first time)

 var dataBoundCallCount = 0;
 $("#myGridID").kendoGrid({
 dataBound: function (e) {
  if (dataBoundCallCount == 0) {
       bindPagingToGridTop($("#myGridID"), false);
  }
  dataBoundCallCount++;
}
});