Responsive gallery using listview

2 posts, 0 answers
  1. Morten
    Morten avatar
    267 posts
    Member since:
    Jul 2012

    Posted 03 Jul 2014 Link to this post


    in a mvc project (using bootstrap) I'm using kendo listview to display a number of image thumbnails and use magnific to lightbox the gallery.
    The listview gets data via a kendo datasource in which I've set pagesize to x and I've hook up a pager.

    This works great on a desktop, however, on an tablet or phone I'd like to reduce the thumbnail sizes (css) and show more thumbnail images (pagesize).

    Since I'm new to responsive design, I thought I'd ask if anyone could suggest a good (the best) approach to handle the above scenario.

  2. Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 07 Jul 2014 Link to this post

    Hello Morten,

    You can use to determine (via JavaScript) on what kind of device your application is opened. This will give you the ability to set different page size according to the device. For example:
    //set pageSize: 5 on mobile device and pageSize: 10 of desktop
    pageSize: ? 5 : 10

    Alternatively you can modify the pageSize with the pageSize method of the dataSource.

    Regarding the CSS styling, you can use media queries (tutorial).

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