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 ?
Appreciate your help.
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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.