In the jquery scrollView component https://docs.telerik.com/kendo-ui/api/javascript/ui/scrollview there is no current way to enableto 'endless' or 'wrap around' option like the react component has
ref: https://www.telerik.com/kendo-react-ui/components/scrollview/endless-scrolling/
Requesting that this feature be added.
For my SPECIFIC my use case (which will probably not work for everyone), I did add a workaround for now
(not fond of it as it relies on the implementation details of the current version)
In our SCSS, I added an override to force the previous/next buttons to always be visible, even after the control hides them
...
&.k-scrollview {
.k-scrollview-prev, .k-scrollview-next {
//Prevent the control from hiding these buttons when it reaches the 'end'
//We will be using some custom logic to force the 'wrap around'
display:flex !important;
...Then I subscribed click events and did some manual handling on the buttons
//After the page load & scroll view is initialized...
//note: $slides is a jquery instance that the scrollView is attached to
let scrollView = $slides.data("kendoScrollView");
let $prev = $slides.find('.k-scrollview-prev');
let $next = $slides.find('.k-scrollview-next');
$prev.on("click", function (e) {
// NOTE: Here we are looking at an 'internal' variable, this is dependent on the version of Kendo we are using - may need to change
// in the future
// I figured this out by looking at the implementation in the source
// \src\js\kendo.scrollview.js
let pageCount = scrollView._content.pageCount;
let currentPage = scrollView._content.page;
if (pageCount > 1 && currentPage === 0) {
e.preventDefault();
e.stopPropagation();
scrollView.scrollTo(pageCount-1);
}
});
$next.on("click", function (e) {
let pageCount = scrollView._content.pageCount;
let currentPage = scrollView._content.page;
if (pageCount > 1 && currentPage === pageCount - 1) {
e.preventDefault();
e.stopPropagation();
scrollView.scrollTo(0);
}
});