Kendo ScrollView Local Paging Demo
Fiddle to reproduce an issue with a ScrollView and a local data source.
HTML
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://origin.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">
<div id="scrollview"></div>
<script id="template" type="text/x-kendo-template">
#for (var i = 0; i < data.length; i++) { #
<div class="client">
#: data[i].FirstName # #: data[i].LastName#
</div>
#}#
</script>
CSS
#scrollview .km-virtual-page {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}
.client {
width: 200px;
height: 200px;
border: 1px solid red;
text-align: center;
}
JavaScript
var clients = [];
for (var i = 0; i < 100; i++) {
clients.push({
FirstName: "First Name " + i,
LastName: "Last Name " + i
});
}
$("#scrollview").kendoMobileScrollView({
dataSource: kendo.data.DataSource.create({
data: clients,
//pageSize: 48
}),
itemsPerPage: 8,
template: $("#template").html(),
enablePager: false
});