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 the pageSize must be 24 (4*6) or higher.

Applicable only in data bound mode.


<div data-role="view" data-stretch="true">
  <div data-role="scrollview"

<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>

var app = new;

var dataSource = new{
  type: "odata",
  transport: {
    read: {
      url: ""
  serverPaging: true,
  pageSize: 12 //2*6

function setBackground(id) {
  return "url(" + id +".jpg)";
In this article
Not finding the help you need? Improve this article