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"
        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>
In this article