Endless List View as an Image Container with Responsive Design

[Eric]

Hi,
 
I'm trying to make a Pinterest like page for images -  the images will need to be clickable to display some kind of pop-up or light box so the user can vote for or share the image. I need endless scrolling with a responsive widget that wraps the images as the screen size changes. So, in a desktop environment there might be 10 images across while in a mobile environment there might be one, two, three , or four depending if the mobile device is a phone or tablet.

The only widget I see with endless scrolling is the Mobile List View, though the Scroll View custom template example does seem to do that too. I just can't figure out how to make it work with our XML datasource. (I might actually prefer using this widget but, like I said, I can not figure out how it works. I welcome any advice here too.)

Using the Endless Scrolling mobile List View example as a start, how do I get it to display images horizontally to fill a row to the width of its container and wrap to 
the next row when needed? (It seems that when I don't use the endless scrolling setting that the images will form 3 columns but with endless scroll turned on the widget insists on only having one column).

I have tried following the following post but it is getting me no where as the images are always stacked on top of each other as though I made no changes:
http://www.kendoui.com/forums/kendo-ui-mobile/general-discussions/container-for-images.aspx

Also, how do I dynamically set the total count of images in the datasource. The total count is unknown until the data is brought back. The total count is an attribute of the root element in the returned XML.

Thanks,
Eric

[Petyo]

Hello Eric,

I am afraid that the virtual mode of the listview is not suitable for a responsive layout. It uses absolute positioning to virtualize and reuse the items. I can't really recommend this widget (or the scrollview) for pinterest kind of UI. 

Please check our DataSource demos about XML databinding. Also, the schema.total property may be a string.

Regards,
Petyo
Telerik

[Eric]

Hi,

What would you recommend for me to use to achieve what I want? Is the XML databinding link suppose to help me with that? If so, how am I suppose to hook up to the scroll event when it reaches the end of the page and what happens when I reach the end of the XML file and need to go get more data?

If the Scroll View is capable of giving me a continuous feed, then I might be able to use that. Sort of like the Custom Template example - it's not Pinterest, but I like it. How would I set that up to retrieve more data once it has reached the end of the existing data set.


Thanks,
Eric

[Petyo]

Hi Eric,

We don't have a widget or an example that resembles the pinterest UI concept. The datasource data fetching abstraction features and the kendo templates are good candidates for building blocks of such UI, should you go this way. 

Regarding your second question: both the listview and the scrollview widgets rely on the datasource server paging implementation to retrieve the next set of data. This is performed automatically. You need to make sure that the service endpoint understands the passed paging parameter values. 

Regards,
Petyo
Telerik