pageable Boolean|Object (default: false)

If set to true the ListView 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 ListView, then the pagesize option should be set in the dataSource's settings and not in the pageable settings.

Example - enable paging

<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: crudServiceBaseUrl + "/Products",
              dataType: "jsonp"
            }
          },
          pageSize: 10
        });

    var listView = $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: true
    }).data("kendoListView");
  });
</script>
In this article
Related articles
Not finding the help you need? Improve this article