Unplanned
Last Updated: 05 Sep 2024 09:54 by ADMIN
Anthony Gianino
Created on: 04 Sep 2024 10:53
Category: Kendo UI for jQuery
Type: Feature Request
0
Enable 'endless' option on ScrollView

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);						
	}
});

 

 

1 comment
Anthony Gianino
Posted on: 04 Sep 2024 10:56
Can the title be changed please? ('Request: Enable 'endless' option on ScrollView)