pageable.pageSizes Boolean|Array (default: false)

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.

Example - show the page size DropDownList

<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>

Example - specify the page sizes as array

<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>