This is a migrated thread and some comments may be shown as answers.

scrollTo/next not working properly?

2 Answers 332 Views

ScrollView

This is a migrated thread and some comments may be shown as answers.

Tayger asked on 20 Apr 2021, 06:16 PM

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!

2 Answers, 1 is accepted

Accepted

answered on 23 Apr 2021, 02:34 PM

Hello,

Thank you for the code snippet.

I have investigated it and noticed that the "scrollTo()" and "next()" methods are set to new instances of the ScrollView widget. The kendoScrollView() method creates a new instance of the widget every time it is invoked. Therefore, in case there are multiple instances over a single HTML element, the methods and API might not work as anticipated.

I would suggest passing the initial instance of the ScrollView as an argument of the function "jumpNextPage()":

$(document).ready(function () {
   $("#scrollView").kendoScrollView({
      enablePager: true,
      contentHeight: "100%",
      page: 0
    });

    var scrollView = $("#scrollView").data().kendoScrollView;
    timerNewPage = setInterval(() => jumpNextPage(scrollView), 4000);
});

Here is a runnable Dojos ample for your reference:

https://dojo.telerik.com/eDUGawAT

Would you please give a try of this example and let me know if it works properly at your end?

Best,
Mihaela Lukanova
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.