New to Kendo UI for jQuery? Start a free 30-day trial

Change

events

Fires when the ScrollView page is changed.

change

Event Data

e.currentPage `Number`

The current page (zero-based index).

e.nextPage `Number`

The next page (zero-based index).

e.element `jQuery`

The page element. In the standard mode, the parameter will be undefined.

Available only in the data-bound mode.

e.data `Array`

The data collection. In the standard mode, the parameter will be undefined.

Available only in the data-bound mode.

e.preventDefault `Function`

If invoked, prevents the change action.

<div id="scrollview"></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>
$("#scrollview").kendoScrollView({
      dataSource: dataSource,
      template: "scrollview-template",
      contentHeight: "120px",
      enablePager: false,
      change: change
});

var dataSource = new kendo.data.DataSource({
  type: "odata-v4",
  transport: {
    read: {
      url: "https://demos.telerik.com/service/v2/odata/Products"
    }
  },
  serverPaging: true,
  pageSize: 30
});

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

function change(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log("page ", e.page, "data: ", e.data);
  //handle event
}
</script>