container for images

9 posts, 0 answers
  1. john
    john avatar
    9 posts
    Member since:
    Jun 2009

    Posted 18 Apr 2012 Link to this post

    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">
                </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
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 19 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. john
    john avatar
    9 posts
    Member since:
    Jun 2009

    Posted 19 Apr 2012 Link to this post

    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)

     

     

     

     

     

  4. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 19 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. john
    john avatar
    9 posts
    Member since:
    Jun 2009

    Posted 19 Apr 2012 Link to this post

    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

  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 24 Apr 2012 Link to this post

    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!
  7. john
    john avatar
    9 posts
    Member since:
    Jun 2009

    Posted 24 Apr 2012 Link to this post

    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>

  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 25 Apr 2012 Link to this post

    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!
  9. john
    john avatar
    9 posts
    Member since:
    Jun 2009

    Posted 25 Apr 2012 Link to this post

    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
Back to Top