This is a migrated thread and some comments may be shown as answers.

container for images

8 Answers 263 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

john asked on 18 Apr 2012, 07:22 PM

Capture.PNG

I am trying to create a sample that will look like the instagram and I can do this statically as follows:

<div data-title="images" data-role="view" id="index" data-url="/" data-layout="default" data-model="ImageViewModel" data-init="initImageView">

<div id="container">

<img src="http://pierre.chachatelier.fr/programmation/images/mozodojo-mosaic-image.jpg" />

</div>

</div

>



now this produces the look that I want (see attached file) with each image side by side and N fit on a row according to the width of container. of course this is more than crude as I am not using the VM but cannot see how to use one of your containers that allow using data-binding and MVVM. All the List want to put each image on its own line. This is pretty easy in Sencha Touch as they have dataview container which u seem to be missing.



Thanks

8 Answers, 1 is accepted

answered on 19 Apr 2012, 04:03 PM

I guess we are not on the same page, I think I understand how the source binding works in MVVM but in all the cases where an array is bound to a list then the HTML that is produced looks like:
<ul>
<li>
id: <span>1</span>
name: <span>Coffee</span>
</li>
<li>
id: <span>2</span>
name: <span>Tea</span>
</li>
<li>
id: <span>3</span>
name: <span>Juice</span>
</li>
</ul>
so if I have an Item template that looks :

script type="text/x-kendo-template" id="customListViewTemplate">

img class="item-photo" src="${url}" />

</

then each image will always be a seperate row as you are generating a UL .. LI I want to control each bound element with CSS so the images are in rows (multiple per row)

answered on 19 Apr 2012, 05:19 PM

Capture3.PNG

Thanks and that is moving in right direction as (testing) I added this CSS:

</li>

the output still looks like a list as a show in the attached

answered on 24 Apr 2012, 03:17 PM

Hello John,

I examined your code snippets and it seems that the definition of your template is correct:

<script type="text/x-kendo-template" id="customListViewTemplate">

<img class="item-photo" src="${url}"/>

</script>

In order to achieve the described visualization of the images, I changed your inline style definition of the <li> elements as removed float: left. Please check the following code snippet:

<style>

#listview > li{

border: 0;

display: inline-block;

width: 20%;

padding: 3px;

}

</style>

#listview is the id of the <ul id="listview"> - this is the element from which the Kendo UI Mobile ListView is initialized.

Regards,
Iliana Nikolova
the Telerik team

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

answered on 24 Apr 2012, 04:47 PM

I see what u are trying to do and it makes sense providing a block style for the li but when I use this style NOTHING appears:

<body>

<a href="../index.html">Back</a>

<div data-role="view" id="listview-templates" data-init="mobileListViewTemplatesInit" data-title="ListView">

<div class="head"> </div>

<ul id="listview" ></ul>

</div>

<script type="text/x-kendo-template" id="customListViewTemplate">

<li >

<img class="item-photo" src="${url}" />

</li>

</script>

<script>

var groupedData = [

{ name: "Sashimi Salad", description: "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.", url: "../../content/mobile/listview/sashimi-salad.jpg", letter: "S" },

{ name: "Seaweed Salad", description: "A nice seaweed salad.", url: "../../content/mobile/listview/seaweed-salad.jpg", letter: "S" },

{ name: "Edamame", description: "Boiled soy beans with salt.", url: "../../content/mobile/listview/edamame.jpg", letter: "E" },

{ name: "Maguro", description: "Tuna pieces.", url: "../../content/mobile/listview/maguro.jpg", letter: "M" },

{ name: "Tekka Maki", description: "Tuna roll with wasabi.", url: "../../content/mobile/listview/tekka-maki.jpg", letter: "T" },

{ name: "California Rolls", description: "Crab sticks, avocado and cucumber.", url: "../../content/mobile/listview/california-rolls.jpg", letter: "C" }

];

function mobileListViewTemplatesInit() {

$("#custom-listview").kendoMobileListView({

dataSource: kendo.data.DataSource.create({data: groupedData }),

template: $("#customListViewTemplate").html(),

headerTemplate: "<h2>Letter ${value}</h2>"

});

}

</script>

<style scoped>

.item-photo {

width: 100px;

height: 100px;

box-shadow: 0 1px 3px #333;

border-radius: 8px;

}

#listview .li{

border: 0;

display: inline-block;

width: 30%;

padding: 3px;

}

</style>

answered on 25 Apr 2012, 12:12 PM

Hi John,

As I mentioned in my previous post, the correct template for your scenario is:

<script type="text/x-kendo-template" id="customListViewTemplate">

<img class="item-photo" src="${url}" />

</script>

You do not need <li> element here, because you initialize the mobile ListView using a jQuery selector. Also, it seems that the <ul> element for the initialization of the Kendo Mobile ListView is <ul id="listview" >, but you use $("#custom-listview").kendoMobileListView.

Please notice that you need to initialize the mobile application:

var app = new kendo.mobile.Application();

Also, in the CSS code snippet the correct selector for your scenario is #custom-listview li, not #listview .li.

Greetings,
Iliana Nikolova
the Telerik team

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