Paging
By default, paging in the ListView is disabled.
When the number of items that are bound to a ListView is larger than expected, a pager will control the items that are displayed. By default, the ListView displays a pager even when the total amount of its data source items is less than the PageSize value.
Getting Started
To enable the paging functionality of the ListView:
-
Set the
Pageableoption.```Template <script type="text/x-kendo-tmpl" id="template"> <div class="product"> <h3>#=ProductName#</h3> <dl> <dt>Price:</dt> <dd>#=kendo.toString(UnitPrice, "c")#</dd> </dl> </div> </script> ``` ```Razor @(Html.Kendo().ListView(Model) // The ListView will be initially bound to the Model which is the Products table. .Name("productListView") // The name of the ListView is mandatory. It specifies the "id" attribute of the ListView. .TagName("div") // The tag name of the ListView is mandatory. It specifies the element which wraps all ListView items. .ClientTemplateId("template") // This template will be used for rendering the ListView items. .Scrollable() .HtmlAttributes(new { style="height:350px;" }) .DataSource(dataSource => { dataSource.Read(read => read.Action("Products_Read", "ListView")); }) // The DataSource configuration. It will be used for paging. .Pageable() // Enable paging. ) ``` -
Define the page size.
```Template <script type="text/x-kendo-tmpl" id="template"> <div class="product"> <h3>#=ProductName#</h3> <dl> <dt>Price:</dt> <dd>#=kendo.toString(UnitPrice, "c")#</dd> </dl> </div> </script> ``` ```Razor @(Html.Kendo().ListView(Model) // The ListView will be initially bound to the Model which is the Products table. .Name("productListView") // The name of the ListView is mandatory. It specifies the "id" attribute of the ListView. .TagName("div") // The tag name of the ListView is mandatory. It specifies the element which wraps all ListView items. .ClientTemplateId("template") // This template will be used for rendering the ListView items. .Scrollable() .HtmlAttributes(new { style="height:350px;" }) .DataSource(dataSource => { dataSource.Read(read => read.Action("Products_Read", "ListView")); dataSource.PageSize(4); // Set the page size for the ListView. }) // The DataSource configuration. It will be used for paging. .Pageable() // Enable paging. ) ```