How to display the previous and following element of a scroll view ?

[Yohann]

Hello again :)

I have a scrollview working properly in my app.

When doing beta testing, my beta testers told me they don't understand that the element is "swipable" and that they can interact with it. They just think it is a static block and do not event try to swipe it.

To solve that matter, I would like to display a bit of the previous and following elements on the right and the left of the page so that they can see there are other elements on the side and they just have to swipe left or right to access it.

Is it doable with Kendo UI Or Can I simply find a work around with css ? Otherwise, what do you advise ? did you already faced this situation ?

Many Thanks

[Kiril Nikolov]

Hi Yohann,

There is no built-in way to show prev/next elements inside the Kendo UI ScrollView. The best approach for me is to show the pager of the ListView that is clear enough for all the users that the elements is scrollable, as shown here:

http://demos.telerik.com/kendo-ui/mobile/scrollview/index.html

Regards,
Kiril Nikolov
Telerik

 

 

[Yohann]

Great ! but the thing is I have around 50-100 elements in my scroll view so there will be too many dots in the pager ..

Can I find a trick/workaround with css ?

[Kiril Nikolov]

Hello Yohann,

You can think of a CSS solutions, for showing some visual clues, however we do not have such built-in Kendo UI, so you will need to create some custom code for it.

Regards,
Kiril Nikolov
Telerik

 

 

[Nicholas]

Hi Yohann

My client is asking for the same functionality.

Did you manage to achieve a solution to this?

Thanks

Nick

[Kiril Nikolov]

Hi Guys,

We have uploaded the following demo that shows the functionality that you are looking for. Please check it out here:

http://demos.telerik.com/kendo-ui/web/mobile/scrollview.html

Regards,
Kiril Nikolov
Telerik

 

 

[Nicholas]

Hi

Thanks for that - but not what I'm after.

When the scrollview initialises - it makes each pages width 100% of it's container.

What I'd like to do, is make each page 80% of the container, so that 10% each side is the before and after pages.

Is there anyway to achieve that?

Thanks

Nick

[Kiril Nikolov]

Hi Nicholas,

You can set padding of the item inside the container if you want to have offset from the left and right edge of the screen, like in this example:

http://trykendoui.telerik.com/@Kiril/oxat

I would also suggest you to check the pageSize property of the ListView, that you can use to display some of the next page as well, as explained here:

http://docs.telerik.com/kendo-ui/api/mobile/scrollview#configuration-page

Regards,
Kiril Nikolov
Telerik

 

 

[ptw]

Hi,

FYI - I think I might have a solution to showing more than scrollview page at a time. (So you can see some or all of the previous/next page).

http://dojo.telerik.com/@ptwilson/UFiWA

The prev/next functions use the scrollTo() function and a quick css change to achieve single-page movement event though multiple pages are being shown.

Hope that helps

-Paul

[ptw]

Hi,

FYI - I think I might have a solution to showing more than scrollview page at a time. (So you can see some or all of the previous/next page).

http://dojo.telerik.com/@ptwilson/UFiWA

The prev/next functions use the scrollTo() function and a quick css change to achieve single-page movement event though multiple pages are being shown.

Hope that helps

-Paul

[Kiril Nikolov]

Hi,

This looks like a really nice solution. Thanks for sharing!

I have updated your Progress Points balance.

Regards,
Kiril Nikolov
Telerik by Progress