itemsPerPage Number
(default: 1)
Determines how many data items will be passed to the page template.
Important: In order ensure smooth scrolling the pageSize of the DataSource should be 6 times itemsPerPage amount or higher. For example, if
itemsPerPage
is set to 4, then thepageSize
must be 24 (4*6) or higher.
Applicable only in data bound mode.
<div data-role="view" data-stretch="true">
<div data-role="scrollview"
data-source="dataSource"
data-template="scrollview-template"
data-items-per-page="2"
data-content-height="120px">
</div>
</div>
<script id="scrollview-template" type="text/x-kendo-template">
<div style="width: 110px; height: 110px; background-image: #=setBackground(data[0].ProductID)#;"></div>
<p>#= data[0].ProductName #</p>
<div style="width: 110px; height: 110px; background-image: #=setBackground(data[1].ProductID)#;"></div>
<p>#= data[1].ProductName #</p>
</script>
<script>
var app = new kendo.mobile.Application();
var dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
},
serverPaging: true,
pageSize: 12 //2*6
});
function setBackground(id) {
return "url(https://demos.telerik.com/kendo-ui/content/web/foods/" + id +".jpg)";
}
</script>