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

Populate list view

0 Answers 70 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Smiely
Top achievements
Rank 1
Smiely asked on 13 Aug 2012, 02:14 PM
Hi, I am new to Kendo UI. I want to populate a listview from JSON object. My JSON obj has image and image name. I want to display image and it's name under that. Where should I start ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <title>Applicatios:</title>
      
    <script src="../lib/script/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../lib/script/jquery-1.7.2.js" type=""></script>
      
  
    <!-- Kendo UI Web styles -->
    <link href="../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../styles/kendo.default.min.css" rel="stylesheet" />    
    <link href="../styles/kendo.blueopal.min.css" rel="stylesheet" />    
  
    <!-- Kendo UI Web scripts -->
    <script src="../js/jquery.min.js" type=""></script>
    <script src="../js/kendo.web.min.js" type=""></script>        
  
</head>
<body>
        <div id="example" class="k-content">
  
        <div id="listView"></div>
  
        <div id="pager" class="k-pager-wrap">
        </div>
            <script type="text/x-kendo-tmpl" id="template">
                <div class="product">
                        <img src="../../${image}.png" alt="" />
                       <h3>${name}</h3>
                </div>
            </script>
  
           <script type="">
                $(document).ready(function () 
                {
                    var dataSource = new kendo.data.DataSource({
                    transport: {
                            read: {
                                url: "images_json.txt",
                                dataType: "json"
                            }
                        },
                        schema: {
                            data: "results"
                        }
                        });
  
             $("#pager").kendoPager({
              dataSource: dataSource
               });
  
               $("#listView").kendoListView({
               dataSource: dataSource,
                template: kendo.template($("#template").html())
                });
          }); 
                </script>
        </div>
                <style type="">
                    .product
                    {
                        float: left;
                        width: 270px; 
                        height: 110px;
                        margin: 10px;
                        padding: 5px;                        
                    }
      
                </style>
         
</body>
</html>


Appreciate your help.
Thanks.

No answers yet. Maybe you can help?

Tags
ListView
Asked by
Smiely
Top achievements
Rank 1
Share this question
or