Edit this page

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) {
  console.log("page ", e.page, "data: ", e.data);
  //handle event
}
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy