Data Binding
Starting with the R2 2023 release, Kendo UI will no longer ship Hybrid UI components. This means that the R2 2023 will be the last release to include Kendo Hybrid in the Kendo UI package. See full announcement in Kendo jQuery blog post. The last stable version that we recommend to use for Kendo Hybrid components is R3 2022 SP1.
The Hybrid ScrollView provides options for binding it to local JavaScript arrays and remote data over the Kendo UI DataSource component.
Local JavaScript arrays are useful for small data sets. Remote data binding with serverPaging applies better to larger datasets.
If the total amount of displayed data is large, it is recommended to turn off the pager by setting
enablePager: falsein the configuration options or viadata-enable-pager="false"data attribute.
If the dataSource configuration option of the ScrollView is set, the widget operates in a data-bound mode. In it, a fixed amount of DOM elements are rendered and then dynamically repositioned and updated while the user scrolls the widget. Once the ScrollView reaches the total amount of DataSource items, forward scrolling is automatically prevented.
Binding with data Attributes
The following example demonstrates how to initialize a Hybrid UI ScrollView bound to remote data by using the data attributes.
<div data-role="view" data-stretch="true">
<div data-role="scrollview"
data-source="dataSource"
data-template="scrollview-template"
data-content-height="120px">
</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();
// Important! The dataSource variable has to be accessible from the global scope.
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)";
}
</script>
Binding with jQuery
The following example demonstrates how to initialize a Hybrid ScrollView bound to remote data by using jQuery plugin syntax.
<div data-role="view" data-stretch="true" data-init="onInit">
<div id="scrollview"></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();
function onInit() {
$("#scrollview").kendoMobileScrollView({
dataSource: {
type: "odata",
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
},
serverPaging: true,
pageSize: 30
},
template: $("#scrollview-template").html(),
contentHeight: 120,
enablePager: false
});
}
function setBackground(id) {
return "url(https://demos.telerik.com/kendo-ui/content/web/foods/" + id +".jpg)";
}
</script>