Kendo Grid paging: Current page in the middle

Question

I have a Kendo grid with paging enabled. Currently, if i'm at the 20th page for example, then the paging looks like this:

|< < ...  11  12  13  14  15  16  17  18  19 [20] ... > >|

I'd like the current page to always be displayed at the middle:

|< < ...  15  16  17  18  19 [20] 21  22  23  24  25 ... > >|

Is it possible to do this?

I've looked into the grid paging in Kendo API Documentation but I can't find any option that might enable this feature. I also couldn't find anyone else with a similar problem in stackoverflow, nor any way to change the grid paging behavior (other than server side paging).

Thanks in advance for any help!

Hi Steve, thanks for the help! Unfortunately, the link you provided doesn't quite solve the issue... The link describes how to change the text on some labels like the "next" button tooltip, or the text that displays when no entries are found for the grid, I need to change the paging behavior, not just the messages. — 3snoW

3snoW 3snoW · Accepted Answer · 2019-11-13T15:50:18

After some work and with some insight from this article, I managed to implement this feature using the databound event.

If anyone wants to try it out, just paste the folowing code to a Kendo UI Dojo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>

<script>
 $("#grid").kendoGrid({
    columns: [
      { field: "productName" },
      { field: "category" }
    ],
    dataSource: [
      { productName: "Tea", category: "Beverages" },
      { productName: "Coffee", category: "Beverages" },
      { productName: "Ham", category: "Food" },
      { productName: "Bread", category: "Food" },
      { productName: "Cheese", category: "Food" },
      { productName: "Milk", category: "Beverages" },
      { productName: "Tea", category: "Beverages" },
      { productName: "Coffee", category: "Beverages" },
      { productName: "Ham", category: "Food" },
      { productName: "Bread", category: "Food" },
      { productName: "Cheese", category: "Food" },
      { productName: "Milk", category: "Beverages" },
      { productName: "Coffee", category: "Beverages" },
      { productName: "Ham", category: "Food" },
      { productName: "Bread", category: "Food" },
      { productName: "Cheese", category: "Food" },
      { productName: "Milk", category: "Beverages" },
      { productName: "Tea", category: "Beverages" },
      { productName: "Coffee", category: "Beverages" }
    ],
    pageable: {
      pageSize: 1,
      responsive: false
    },
    dataBound: onDataBound
  });
function onDataBound(e) {
    var grid = e.sender
    var pager = grid.element.find('ul.k-pager-numbers').first();
    if(pager.length){

      var max = grid.dataSource.totalPages();
      var center = grid.dataSource.page();

      var left, right;
      if(max <= 11){
        left = 1;
        right = max;
      } else {
        left = center-5;
        right = center+5;
        if(left<1){
          right += (1-left);
          left = 1;
        }
        if(right > max){
          left -= (right-max);
          right = max;
        }
      }

      var new_pager = '<ul class="k-pager-numbers k-reset">';
      new_pager += '<li class="k-current-page"><span class="k-link k-pager-nav">'+center+'</span></li>';
      for (var l = left; l<center; l++){
        new_pager += '<li><a tabindex="-1" href="#" class="k-link" data-page="'+l+'">'+l+'</a></li>';
      }
      new_pager += '<li><span class="k-state-selected">'+center+'</span></li>';
      for (var r = center+1; r<=right; r++){
        new_pager += '<li><a tabindex="-1" href="#" class="k-link" data-page="'+r+'">'+r+'</a></li>';
      }
      new_pager += '</ul>';

      pager.replaceWith(new_pager);
    }
}
</script>
</body>
</html>

Kendo Grid paging: Current page in the middle

1 Answers