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>