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

Pageable

configuration

If set to true the grid will display a pager. By default paging is disabled.

Can be set to a JavaScript object which represents the pager configuration.

Don't forget to set a pageSize, no matter if paging is performed client-side or server-side. A pageSize can be defined in the pageable settings, or in the dataSource settings. If an already existing datasource instance is passed to the grid, then the pagesize option should be set in the dataSource's settings and not in the pageable settings.

pageable

Boolean|Object

Default: false

<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" }
  ],
  pageable: {
    pageSize: 2
  }
});
</script>

pageable.adaptiveMode

String

Specifies a value whether the page sizes dropdown will be adaptive. Possible values are:

none - The current page.
auto - The total number of pages.

Default: "none"

<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" }
  ],
  pageable: {
    pageSize: 2,
    adaptiveMode: "auto"
  }
});
</script>

pageable.alwaysVisible

Boolean

By default the grid will show the pager even when total amount of items in the DataSource is less than the pageSize.

If set to false the grid will toggle the pager visibility as follows:

when the total amount of items initially set in the DataSource is less than the pageSize number the pager will be hidden.
when the total amount of items initially set in the DataSource is greater than or equal to the pageSize number the pager will be shown.
when the total amount of items in the DataSource becomes less than the pageSize number (after delete, filter operation or pageSize change) the pager will be hidden.
when the total amount of items in the DataSource becomes greater than or equal to the pageSize number (after an insert, filter operation or pageSize change) the pager will be shown.

Introduced in the Kendo UI 2017 R3 release.

Default: true

<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" }
  ],
  pageable: {
    pageSize: 5,
    alwaysVisible: false
  }
});
</script>

pageable.buttonCount

Number

The maximum number of buttons displayed in the numeric pager. The pager will display ellipsis (...) if there are more pages than the specified number.

Default: 10

<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" }
  ],
  pageable: {
    pageSize: 2,
    buttonCount: 1
  }
});
</script>

pageable.info

Boolean

If set to true the pager will display information about the current page and total number of data items. By default the paging information is displayed.

Default: true

<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" }
  ],
  pageable: {
    pageSize: 2,
    info: false
  }
});
</script>

pageable.input

Boolean

If set to true the pager will display an input element which allows the user to type a specific page number. By default the page input is not displayed.

Using pageable.input and pageable.numeric at the same time is not recommended.

Default: false

<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" }
  ],
  pageable: {
    pageSize: 2,
    input: true
  }
});
</script>

pageable.messages

Object

The text messages displayed in pager. Use this option to customize or localize the pager messages.

<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" }
  ],
  pageable: {
    pageSize: 2,
    messages: {
      display: "Showing {0} to {1} of {2} entries",
      page: "Page",
      of: "of {0}",
      first: "First",
      last: "Last",
      next: "Next",
      previous: "Previous"
    }
  }
});
</script>

pageable.numeric

Boolean

If set to true the pager will display buttons for navigating to specific pages. By default those buttons are displayed.

Using pageable.numeric and pageable.input at the same time is not recommended.

Default: true

<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" }
  ],
  pageable: {
    pageSize: 2,
    numeric: false
  }
});
</script>

pageable.pageSize

Number

The number of data items which will be displayed in the grid. This setting will not work if the Grid is assigned an already existing Kendo UI DataSource instance.

<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" }
  ],
  pageable: {
    pageSize: 2
  }
});
</script>

pageable.pageSizes

Boolean|Array

If set to true the pager will display a drop-down which allows the user to pick a page size. By default the page size drop-down is not displayed.

Can be set to an array of predefined page sizes to override the default list. A special all value is supported. It sets the page size to the total number of records.

If a pageSize setting is provided for the data source then this value will be selected initially.

Default: false

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "productName" },
      { field: "category" }
    ],
    dataSource: {
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Water", category: "Beverages" },
        { productName: "Juice", category: "Beverages" },
        { productName: "Decaffeinated Coffee", category: "Beverages" },
        { productName: "Iced Tea", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" },
        { productName: "Eggs", category: "Food" },
        { productName: "Bacon", category: "Food" },
        { productName: "Chips", category: "Food" },
        { productName: "Fish", category: "Food" }
      ],
      pageSize: 4
    },
    pageable: {
      pageSizes: true
    }
  });
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: {
    data: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
    ],
    pageSize: 1
  },
  pageable: {
    pageSizes: [2, 3, 4, "all"],
    numeric: false
  }
});
</script>

pageable.position

String

Specifies the position in which the grid pager will be rendered. Valid values are "top" and "bottom" (default).

Default: "bottom"

<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" }
  ],
  pageable: {
    pageSize: 2,
    position: "top"
  }
});
</script>

pageable.previousNext

Boolean

If set to true the pager will display buttons for going to the first, previous, next and last pages. By default those buttons are displayed.

Default: true

<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" }
  ],
  pageable: {
    pageSize: 2,
    previousNext: false
  }
});
</script>

pageable.refresh

Boolean

If set to true the pager will display the refresh button. Clicking the refresh button will refresh the grid. By default the refresh button is not displayed.

Default: false

<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" }
  ],
  pageable: {
    pageSize: 2,
    refresh: true
  }
});
</script>

pageable.responsive

Boolean

If set to false the pager will not be responsive. By default the pager is responsive.

Default: true

<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" }
  ],
  pageable: {
    pageSize: 2,
    responsive: false
  }
});
</script>

Related Members