Implementing custom scrolling in listview

2 posts, 0 answers
  1. Rajaraman
    Rajaraman avatar
    14 posts
    Member since:
    Mar 2013

    Posted 09 Aug 2013 Link to this post

    How can i achieve something like the scrollbable images at the bottom in a ListView Control. It has two yellow arrows at the extreme. 
    http://demos.kendoui.com/aeroviewr/#photos/42719114. 

    any updates from anybody ? 
  2.
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 13 Aug 2013 Link to this post

    Hi Rajaraman,

    The functionality which you described is not supported out of the box by Kendo ListView. The arrows that you see in the AeroViewer application are custom made.

    I suggest you to look through the source code of the application and follow the same approach used there. The click event handlers are called scrollLeft and scrollRight. The relevant code is located in aeroviewr.js file:
    scrollRight: function() {
        var width = $("#photo-thumbs").width();
        $("#photo-thumbs").animate({ scrollLeft: "+=" + width }, 500);
    },
     
    scrollLeft: function() {
        var width = $("#photo-thumbs").width();
        $("#photo-thumbs").animate({ scrollLeft: "-=" + width }, 500);
    },

    The scrolling is done via jQuery animate method.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top