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

Implementing custom scrolling in listview

1 Answer 65 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Rajaraman
Top achievements
Rank 1
Rajaraman asked on 09 Aug 2013, 07:30 PM
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 ? 

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 13 Aug 2013, 07:37 AM
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!
Tags
ListView
Asked by
Rajaraman
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or