The documentation for ScrollView autoBind is incorrect or incomplete. When examining the ScrollView autoBind API Reference the sample configuration does not mention or show proper usage of the autoBind configuration. Additionally, I am unable to get the ScrollView widget to initialize when setting autoBind: false
When using this configuration the widget does not initialize. If I set autoBind: true the widget binds to the dataSource but it does not honor the current query parameters.
This code runs correctly when autoBind: true. It fails when autoBind: false Dojo Snippet
<script id="scrollview-template" type="text/x-kendo-template">
<div style="width: 200px; height: 200px; background-image: #=setBackground(data.filename)#; background-repeat:no-repeat; background-size: cover;"></div>
<p>#= data.filename #</p>
</script>
<div id="container" style="margin: 20px;">
<div id="scrollView"
data-role="scrollview"
data-auto-bind="false"
data-pageable="true"
data-enable-pager="true"
data-template="scrollview-template"
data-bind="source: fruits"
data-content-height="100%"
data-page="0"
style="width: 400px; height: 300px; max-width: 100%;">
</div>
</div>
<script>
function setBackground(filename) {
return "url(https://demos.telerik.com/kendo-ui/content/shared/images/photos/" + filename + ")";
}
var viewModel = kendo.observable({
fruits: new kendo.data.DataSource({
data: [
{ filename: "15.jpg" },
{ filename: "16.jpg" },
{ filename: "17.jpg" }
],
schema: {
model: {
fields: {
filenname: { type: "string" }
}
}
}
})
});
$(document).ready(function() {
kendo.bind($("#container"), viewModel);
setTimeout(function(){
console.log("ScrollView Next - Refresh");
//var scrollView = $("#scrollView").kendoScrollView().data().kendoScrollView;
//scrollView.scrollTo(1);
//scrollView.refresh();
}, 1000);
});
</script>