change

Fires when the widget page is changed.

Event Data

e.page Number

The current page (zero based index)

e.element jQuery

The page element. Available only in data bound mode. Parameter will be undefined in standard mode.

e.data Array

The data collection. Available only in data bound mode. Parameter will be undefined in standard mode.

Example - hook up to the change event

<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"
    data-change="change">
  </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)";
}

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>