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>
So I am trying to create a Scrollview from a remote datasource and put the images into a template. I only want 1 image per "page". The code from the following screenshots come from this dojo.
This is the template with the issue.
If you have the pageSize set to 2 or more each page shows the template as designed.
If I change that to a pageSize of 1 the template is blank. How do I get the template to display 1 product per page?
The autoFitColum method sizes the chosen column to the correct size, but it also reduces all other columns to their width property as shown below.
I created some examples to show what I'm talking about by editing autoFitColumn - API Reference - Kendo UI Grid | Kendo UI for jQuery (telerik.com)
This behavior works out in cases where the auto fit column exceeds the grid width (see figure 1), but not in cases where the the data is Smaller than the grid (see figure 2).
The desired behavior, for me, would be for the autoFitColumn method to act like setting the width manually (see figure 3 or dojo example). I need scrollable to be true and grid width to be auto to work on any screen width. Allowing the rows to text-wrap doesn't work for scrolling large data tables.
Is figure 2 the intended behavior, and is there a way to achieve my desired behavior?
<div id="grid"></div><script>
$("#grid").kendoGrid({
columns: [
{ field: "name", width: 100 },
{ field: "age", width : 50 },
{ field: "quote" }
],
dataSource: [
{ name: "Jane Doe", age: 30, quote: "I like Pi." },
{ name: "John Doe", age: 33, quote: "The FitnessGramâ„¢ Pacer Test ... ding" }
],
scrollable: true,
width: 'auto'
});
var grid = $("#grid").data("kendoGrid");
grid.autoFitColumn("quote");
</script>
figure 1: behavior of autoFitColumn if data is longer than grid is wide.
<div id="grid"></div><script>
$("#grid").kendoGrid({
columns: [
{ field: "name", width: 100 },
{ field: "age", width : 50 },
{ field: "quote", }
],
dataSource: [
{ name: "Jane Doe", age: 30, quote: "I like Pi." },
{ name: "John Doe", age: 33, quote: "I like Pi too." }
],
scrollable: true,
width: 'auto'
});
var grid = $("#grid").data("kendoGrid");
grid.autoFitColumn("quote");
</script>
firuge 2: behavior of autoFitColumn if data is shorter than grid is wide
<div id="grid"></div><hr/><div id="grid2"></div><script>
$("#grid").kendoGrid({
columns: [
{ field: "name", width: 100 },
{ field: "age", width : 50 },
{ field: "quote", width : 3272 } //this width should be set by autoFitColumn instead of manually
],
dataSource: [
{ name: "Jane Doe", age: 30, quote: "I like Pi." },
{ name: "John Doe", age: 33, quote: "The FitnessGramâ„¢ Pacer Test ... ding" }
],
scrollable: true,
width: 'auto'
});
$("#grid2").kendoGrid({
columns: [
{ field: "name", width: 100 },
{ field: "age", width : 50 },
{ field: "quote", width: 93 }//this width should be set by autoFitColumn instead of manually
],
dataSource: [
{ name: "Jane Doe", age: 30, quote: "I like Pi." },
{ name: "John Doe", age: 33, quote: "I like Pi too" }
],
scrollable: true,
width: 'auto'
});
//I left this code in a comment to make switching back and forth between my desired and actual behavior easier
/*var grid = $("#grid").data("kendoGrid");
var grid2 = $("#grid2").data("kendoGrid");
grid.autoFitColumn("quote");
grid2.autoFitColumn("quote");*/
</script>
figure 3: desired visual result, but the width should be set using autoFitColumn, not manualy
Hello
I have successfully created a scrollView with pager (clickable dots at bottom). It works when I manually switch to next/previous page or click on a page dot. Now I wanted to enhance that after a few seconds the scrollView switched to the next page. On the last page it should switch back to the first page. For this I'm using the Javascript function setIntervall and scrollView's methods next and scrollTo.I have now a experienced some weird effects:
- next: With each call of method next a page button at bottom disappears
- scrollTo: After reaching the last page it keeps hanging and does not go back to first page
Here's a code sample that runs out of the box:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>Auto scrollview</
title
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.blueopal.min.css"
/>
<
script
src
=
"https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"
></
script
>
<
script
>
var timerNewPage;
var pageNewFile = 0;
// Jump to next page, after page 10 jump back to page 1
function jumpNextPage ()
{
if (pageNewFile > 8) {
pageNewFile = 0;
var scrollView = $("#scrollView").kendoScrollView().data().kendoScrollView;
scrollView.scrollTo(0);
}
else {
var scrollView = $("#scrollView").kendoScrollView().data().kendoScrollView;
scrollView.next();
pageNewFile += 1;
}
}
$(document).ready(function () {
// Init scrollView
$("#scrollView").kendoScrollView({
enablePager: true,
contentHeight: "100%",
page: 0
});
timerNewPage = setInterval(() => jumpNextPage(), 4000);
});
</
script
>
</
head
>
<
body
>
<
div
id
=
"scrollView"
style
=
"height: 500px;"
>
<
div
data-role
=
"page"
>Page 1</
div
>
<
div
data-role
=
"page"
>Page 2</
div
>
<
div
data-role
=
"page"
>Page 3</
div
>
<
div
data-role
=
"page"
>Page 4</
div
>
<
div
data-role
=
"page"
>Page 5</
div
>
<
div
data-role
=
"page"
>Page 6</
div
>
<
div
data-role
=
"page"
>Page 7</
div
>
<
div
data-role
=
"page"
>Page 8</
div
>
<
div
data-role
=
"page"
>Page 9</
div
>
<
div
data-role
=
"page"
>Page 10</
div
>
</
div
>
</
body
>
</
html
>
I have tested in on lastest Safari, Chrome and Firefox, all with the same described behaviour.Is this a bug or am I doing something wrong? I've used the method refresh after page switch but didn't fix the vanishing page buttons. I've also tried to scroll to next page with scrollTo (instead of using next) but also with the same weird behaviour.
Any help/hint appreciated!
Hi!
Have any ways make infinite scroll for data source? I need make cyclical page scrolling. By default Kendo disable next scroll button when reached last slide.
What i tried. I attach functin on onchange event like this
_infinityScroll: function (e) {
var nextPage = e.nextPage,
currentPage = e.curentPage,
items = e.sender.dataSource.data();
if (currentPage === -1) {
e.curentPage = 0
}
if (nextPage === -1) {
e.nextPage = 0
}
if (nextPage === items.length) {
e.sender.element.data('kendoScrollView').scrollTo(-1);
e.preventDefault();
}
_showScrollButtons()
},
It's works but looks so bad...
Hi, Dev Team!
First of all thank you for awesome ScrillView control.
I did not catch how i can provide gallery for images with unknown height?
HTML:
<div id="scrollView" style="height: 600px; width: 100%;"> <--here i need dynamic height
</div>
<script id="scrollview-template" type="text/x-kendo-template">
<div style="text-align: center;">
<p>#=data.Name#</p><img src="#=setBackground(data.ServerRelativeUrl)#">
</div>
</script>
SCRIPT:
$("#scrollView").kendoScrollView({
dataSource: AreaPhotoDS,
template: $("#scrollview-template").html(),
enablePager: true
});
Hi all,
Just attached the expect layout for the Carousel slider i want.
But i have no idea how to make like that use the Kendo ScrollView...
I tried to change the css make the same layout, but when i go next page, the position go wrong.
Should i handle the position calculation on the Event "change"?
Hi all,
The documentation on the kendoScrollvView demo link appears to be wrong: https://demos.telerik.com/kendo-ui/scrollview/index
The provided css contains a #scrollview-home string. However, this should be just #scrollview, not #scrollview-home:
("#scrollview-home .photo { display: inline-block; background-size: cover; background-repeat: no-repeat; background-position: center center;}")
However, when I correct it, I still can't get the background image to properly cover the widget. It centers the image, but it contains overflow on the side which expands the width of the widget and expands out to the next screen. Is there an example how to use this widget on an adaptive site?
Thanks for your advice,
Gregory
Hi,
How to know what is the active page in a scrollview when initialized from HTML ?
Best regards,
Laurent.