JSFiddle - React, Tailwind, and code Playground

by nukefusion

HTML

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

<script id="customer-template" type="text/x-kendo-template">
<span>
     <h2>${customerName}</h2>
     #= renderNotesTemplate(data) #
</span>
</script>

<script id="notes-template" type="text/x-kendo-template">
    <p>${notes}</p>
</script>

JavaScript

var data = kendo.observable({
    customers: [{
        customerName: "Bob",
        notes: "Wants his order by Saturday"
    },{
        customerName: "Jim",
        notes: "Owes us $300"
    },{
        customerName: "Anton",
        notes: "2 items outstanding on last order"
    }]
});

function renderNotesTemplate(data) {
    return kendo.Template.compile($('#notes-template').html())(data);
}

$('#listview').kendoListView({
    dataSource:{data:data.customers},
    template: kendo.template($('#customer-template').html())
});