dataSource kendo.data.DataSource | Object

An instance of a DataSource to which the ScrollView will be bound.

If dataSource is set, the widget will operate in the data-bound mode.

Example - binding the ScrollView to a remote DataSource

<div id="scrollView" style="height: 500px; width:600px;"></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 dataSource = new kendo.data.DataSource({
  type: "odata",
  transport: {
    read: {
      url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
    }
  },
  serverPaging: true,
  pageSize: 30
});

$("#scrollView").kendoScrollView({
    dataSource: dataSource,
    template: $("#scrollview-template").html(),
    contentHeight: 120,
    enablePager: true
});

function setBackground(id) {
  return "url(https://demos.telerik.com/kendo-ui/content/web/foods/" + id +".jpg)";
}
</script>
In this article
Not finding the help you need? Improve this article