JSFiddle - React, Tailwind, and code Playground

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>
<hr/>
<div id="listview2"></div>
<hr/>
<a id="aChange" href="#">change datasource</a>
<div id="log"></div>
<script type="text/x-kendo-tmpl" id="template">
    <div>
        ${id}: ${text}
    </div>
</script>

JavaScript

ThisNamespace = {};

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

var data2 = [
    { id: 1, text: "text 4" },
    { id: 2, text: "text 5" },
    { id: 3, text: "text 6" }
];

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

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

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

$("#aChange").click(function(e) {
    $("#listview").data("kendoListView").dataSource.view()[0].set("text", "sample text");
    e.preventDefault();
});

//$("#aChange").click();