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>