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

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

10 Answers 127 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Yohann
Top achievements
Rank 1
Yohann asked on 24 Apr 2014, 06:38 AM
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

10 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 24 Apr 2014, 09:15 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Yohann
Top achievements
Rank 1
answered on 24 Apr 2014, 06:01 PM
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 ?
0
Kiril Nikolov
Telerik team
answered on 25 Apr 2014, 07:35 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nicholas
Top achievements
Rank 1
answered on 09 May 2014, 10:40 AM
Hi Yohann

My client is asking for the same functionality.

Did you manage to achieve a solution to this?

Thanks

Nick
0
Kiril Nikolov
Telerik team
answered on 09 May 2014, 12:40 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nicholas
Top achievements
Rank 1
answered on 12 May 2014, 01:22 PM
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
0
Kiril Nikolov
Telerik team
answered on 14 May 2014, 08:08 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
ptw
Top achievements
Rank 1
answered on 25 Aug 2016, 04:32 AM

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

0
ptw
Top achievements
Rank 1
answered on 25 Aug 2016, 04:32 AM

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

0
Kiril Nikolov
Telerik team
answered on 25 Aug 2016, 07:30 AM
Hi,

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

I have updated your Progress Points balance.

Regards,
Kiril Nikolov
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
ScrollView (Mobile)
Asked by
Yohann
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Yohann
Top achievements
Rank 1
Nicholas
Top achievements
Rank 1
ptw
Top achievements
Rank 1
Share this question
or