container for images

[john]

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" />

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

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

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

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

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

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

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

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

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

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

            <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


[Petyo]

Hi,

The MVVM implementation allows binding of regular list HTML elements - please check the source binding documentation for more details and sample code. 

Greetings,
Petyo
the Telerik team

[john]

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)

 

 

 

 

 

[Petyo]

Hello,

Unless I am missing something, you can apply display: inline (or inine-block) on the li items to achieve the desired effect. 

Greetings,
Petyo
the Telerik team

[john]

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

<li style="display:inline-block;float: left;width:20%;height : auto;padding : 3px;" >

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

</li>

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

[Iliana Dyankova]

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

[john]

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>

[Iliana Dyankova]

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

[john]

Thanks I was being a little slow and you have been very patient, it now works! Your support is the one thing that is much better than Sencha