JSFiddle - React, Tailwind, and code Playground

by stevescotthome

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.blueopal.min.css">
<div id="list"></div>
<div id="pager"></div>
<button onclick="add();">Add</button>
    
<script id="tmp" type="text/x-kendo-template">
    <div class="exandable">
        <span style="background-color: green">#= item # || #= value #</span>
    </div>
</script>

JavaScript

var dataSource = new kendo.data.DataSource({
                data: [
                    {type: 1, item: "Item1", value: 1},
                    {type: 2, item: "Item2", value: 2},
                    {type: 1, item: "Item3", value: 3},
                    {type: 2, item: "Item2", value: 2},
                    {type: 1, item: "Item3", value: 3},
                ],
                pageSize: 2
            });

$("#list").kendoListView({
    dataSource: dataSource,
    template: $("#tmp").html()
});

$("#pager").kendoPager({
                dataSource: dataSource
            });

function add() {
    dataSource.add({type: 2, item: "New Item", value: 4});
}

$(document).ready(function(){
    $("#list").on("click", ".exandable", function(){ alert("click") });
});