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" data-role="listview" data-selectable="true" data-bind="source: listSource, events: { change: onChange, mousedown: onMouseDown }" data-template="template"></div>

<script type="text/x-kendo-tmpl" id="template">
    <div class="customers">
        <dl>
            <dt>First Name</dt>
            <dd>${FirstName}</dd>
            <dt>Last Name</dt>
            <dd>${LastName}</dd>
         </dl>
   </div>
</script>

<script type="text/x-kendo-tmpl" id="template2">
    <div class="customers">
        <dl>
            <dt>First Name</dt>
            <dd>${FirstName}</dd>
            <dt>Last Name</dt>
            <dd>${LastName}</dd>
         </dl>
         <span>123</span>
   </div>
</script>   

<input type="button" id="doBut" value="do"/>

JavaScript

kendo.ui.ListView.fn.options.selectable = false;

var viewModel = kendo.observable({
    test: "text to bind",
    onChange: function () {
    },
    onMouseDown: function (e) {
        e.stopPropagation();
    },
    listSource: [
        { Id: 1, FirstName: "First Name", LastName: "Last Name" },
        { Id: 2, FirstName: "First Name2", LastName: "Last Name2" },
        { Id: 3, FirstName: "First Name1", LastName: "Last Name1" },
        { Id: 4, FirstName: "First Name3", LastName: "Last Name3" }
    ]
});



kendo.bind(document.body.children, viewModel);

$("#doBut").click(function () {
    var temp = kendo.template($("#template2").html());
    console.log(temp);
    $("#listview").data("kendoListView").template = temp;
    $("#listview").data("kendoListView").altTemplate = temp;
    $("#listview").data("kendoListView").refresh();
});