dataSource kendo.data.DataSource | Object

Instance of DataSource that the mobile ScrollView will be bound to. If DataSource is set, the widget will operate in data bound mode.

Important: In case the total amount of displayed data is large, it is recommended to turn off the pager by setting enablePager: false in the configuration options or via data-enable-pager="false" data attribute.

    <div data-role="view" data-stretch="true">
      <div data-role="scrollview"
        data-source="dataSource"
        data-template="scrollview-template"
        data-content-height="120px"
        data-enable-pager="false">
      </div>
    </div>


    <script id="scrollview-template" type="text/x-kendo-template">
      <div style="width: 110px; height: 110px; background-image: #=setBackground(ProductID)#;"></div>
      <p>#= 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: 30
    });

    function setBackground(id) {
      return "url(https://demos.telerik.com/kendo-ui/content/web/foods/" + id +".jpg)";
    }
    </script>