How can I use a image/carousel/slider with listview

[Michael]

I currently am using listview to display some birthdays. We're displaying the name, Date of birth and a field that is a binary image from a DB.

This would normally be fine as it is, with the pager controls, etc. But we have some requirements...we want these to be displayed like a regular image slider you'd find on the web.

1.) Images and other content scrolls automatically without any user intervention.

2.) We do not want paging controls, however, if there were some arrows overlayed near the image that could disappear when the user's mouse is NOT in the content area, that would be fine. In other words, no paging controls at all, but if the user hovers into the content area, I'm OK with a left and right arrow appearing nearby.

I tried looking at kendo scrollview but I can't get that to work, I'm thinking because there's all this key business and more complexities that I think we're looking for.

How can this be achieved?

[Michael]

I ended up coming up with my own solution. It's not fancy; no animations or transitions, but works...

Added this after all the initialization for listview/pager... then in a stylesheet, I targeted the paging controls and did a display:none;

01.//arrow target
02.                            var forwardarrow = $("#pagerBirthdays a[title='Go to the next page']");
03.
04.
05.                            setInterval(function () {
06.                                //pager must not be at the end
07.                                if (!forwardarrow.hasClass("k-state-disabled")) {
08.                                    forwardarrow.trigger("click");
09.                                }
10.                                else {
11.                                    //go back to the first index and reset everything
12.                                    var pagerBD = $("#pagerBirthdays").data('kendoPager');
13.                                    pagerBD.page(1);
14.                                }
15.                            }, 5000);

[Dimiter Topalov]

Hi Michael,

The desired functionality is not supported out-of-the-box, but can be achieved via some custom coding. In fact the Pager, and manually triggering the click event on its elements is not necessary.

A possible approach is to not configure a pager at all, and handle the dataBound event of the Kendo UI ListView to implement the required custom logic that involves getting the current page via the dataSource.page() method, then use the same method to set the page to the next one after a desired amount of time. Also make sure to provide a way for the page to be reset to 0 in accordance with the scenario requirements, and your preference.

I have prepared a simple example to illustrate the described approach:

http://dojo.telerik.com/ENUtA

Of course, you can use the solution you have come up with, or any other that fulfills the specific requirements.

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress