Responsive gallery using listview

[Morten]

Hi

in a asp.net 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.

/Morten

[Alexander Valchev]

Hello Morten,

You can use kendo.support.mobileOS 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: kendo.mobile.mobileOS ? 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).

Regards,
Alexander Valchev
Telerik