Building scrollable Kendo mobile views with list views in 2 steps

Scrolling Kendo mobile views with code in 2 steps
09 February, 2017
Fady Soliman
27 Views

Step 1: Setting up the mobile view HTML and JS

First, you need to create a Kendo mobile view with a wrapper Kendo scroller. To define a Kendo scroller, all you need to do is create a <div> element with a data-role="scroller" tag. The view content must be placed in the defined scroller, you can place whatever controls or HTML content you like in that scroller. The purpose of this scroller will be explained later.

<div data-role="view" data-title="View Title" id="mobile-view">

<div id="container-scroller" data-role="scroller">

<!--place your lists or content here-->

.

.

.

</div>

</div>


Step 2: Scrolling by Kendo JS code to the bottom and to the top

The second step is to write the JavaScript code that would programmatically scroll the view to the bottom.

var scroller = $("#container-scroller").data("kendoMobileScroller");

var scrollY = scroller.scrollHeight() - $("#container-scroller").height();

scroller.animatedScrollTo(0, -1 * scrollY);


The first line would get a Kendo instance of the container-scroller we have created. The second line would calculate the number of vertical pixels (height) that would be scrolled down. The third line would scroll the scroller with some animation. To scroll the scroller to the top it would be much easier than scrolling to the bottom. You'd simply need to reset the scroller using the following line of code:

scroller.reset();


You'r done!

Try the above example and if you had any problems or questions, feel free to leave a comment.

09 February, 2017
Fady Soliman
kendo ui
27 Views

Did you find this helpfull?

About The Author

Fady Soliman

An experienced, resourceful and highly motivated IT professional, with a proven record of success in both Stack Development and Software Architecture. Possesses a wealth of transferable skills, including outstanding interpersonal, problem solving and staff management abilities. A capable organizer, quick to grasp – and make good use of – new ideas and information, and reliable and conscientious in all he takes on.

leave A Comment