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

3 posts, 0 answers
  1. Michael
    Michael avatar
    21 posts
    Member since:
    Jan 2016

    Posted 15 Sep Link to this post

    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?

  2. Michael
    Michael avatar
    21 posts
    Member since:
    Jan 2016

    Posted 16 Sep in reply to Michael Link to this post

    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);

  3. Kendo UI is VS 2017 Ready
  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 19 Sep Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top