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

11 posts, 0 answers
  1. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 24 Apr 2014 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 24 Apr 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 24 Apr 2014 Link to this post

    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 ?
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 25 Apr 2014 Link to this post

    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!
     
  6. Nick
    Nick avatar
    26 posts
    Member since:
    Jan 2005

    Posted 09 May 2014 Link to this post

    Hi Yohann

    My client is asking for the same functionality.

    Did you manage to achieve a solution to this?

    Thanks

    Nick
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 09 May 2014 Link to this post

    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!
     
  8. Nick
    Nick avatar
    26 posts
    Member since:
    Jan 2005

    Posted 12 May 2014 in reply to Kiril Nikolov Link to this post

    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
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 14 May 2014 Link to this post

    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!
     
  10. ptw
    ptw avatar
    27 posts
    Member since:
    Sep 2015

    Posted 24 Aug Link to this post

    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

  11. ptw
    ptw avatar
    27 posts
    Member since:
    Sep 2015

    Posted 24 Aug Link to this post

    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

  12. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 25 Aug Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready