JSFiddle - React, Tailwind, and code Playground

by chanaka1

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="listview"></div>

<div id="log"></div>

<script type="text/x-kendo-tmpl" id="template">
    <div>
        ${id}: ${text}
    </div>
</script>

JavaScript

var data = [
    { id: 1, text: "text 1" },
    { id: 2, text: "text 2" },
    { id: 3, text: "text 3" }
];

var log = (function(el) {
    return function(text) {
        el.html(el.html() + "<br/>" + text);
    };
})($("#log"));

$("#listview").kendoListView({
    dataSource: data,
    template: kendo.template($("#template").html()),
    selectable: "multiple",
    change: function() {
        var index = this.select().index(),
            dataItem = this.dataSource.view()[index];
        log("id: " + dataItem.id + ", text: " + dataItem.text);
    }
});