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.

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="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/kendo-ui/service/Products",
              dataType: "jsonp"
            }
          },
          pageSize: 1
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      pageable: {
        pageSizes: true
      }
    });
  });
</script>

Example - specify the page sizes as array

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/kendo-ui/service/Products",
              dataType: "jsonp"
            }
          },
          pageSize: 2
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      pageable: {
        pageSizes: [2, 3, 4, "all"],
        numeric: false
      }
    });
  });
</script>
In this article