KendoUI-SimpleList

HTML

<script src=" http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://jaydata-cdn.s3.amazonaws.com/datajs-1.0.3-patched.js"></script>
<script src="http://include.jaydata.org/1.2.7/jaydata.min.js"></script>
<script src="http://include.jaydata.org/1.2.7/jaydatamodules/kendo.js"></script>
<div id="pager"></div>
<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
    <div class="product" style="width:300px;float:left">
        <img style="width:250px;height:150px" src="${ImageUrl}" />
        <h3>${Name}</h3>
        <b>${kendo.toString(Price, "c")}</b>
    </div>
</script>

JavaScript

var apiKey = {
    appId: '133e0907-f70b-4f11-92b3-dfebc9bdd6db',
    // see https://dashboard.jaystack.com for your real application key
    applicationKey: 'XXXX',
    serviceName: 'mydatabase',
    license: 'business'
};

$data.initService(apiKey).then(function (mydatabase, factory, type) {
    $(function () {
        startApplication(mydatabase);
    });
});
function startApplication(mydatabase) {
    // storm does not support inline count yet
    delete mydatabase.storageProvider.supportedSetOperations.withInlineCount;
    var _ds = mydatabase.Flowers.asKendoDataSource({ pageSize: 5 });
    $("#listView").kendoListView({
        dataSource: _ds,
        template: kendo.template($("#template").html())
    });
    $("#pager").kendoPager({
        dataSource: _ds
    }).data("kendoPager");
}