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

Populate list view

0 Answers 189 Views

ListView

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

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

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

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

<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.

Populate list view

No answers yet. Maybe you can help?