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>