JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

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

<script id="template" type="text/x-kendo-template">
    Returned value => #= example(foo) #
</script>

JavaScript

$("#grid").kendoGrid({
    dataSource: {
        data: [
            {id: 1, foo: "A"},
            {id: 2, foo: "B"},
            {id: 3, foo: "C"}
        ]            
    },
    selectable: "row",
    columns: [
        {field: "id"},
        {field: "foo", template: $("#template").html()}
    ],
    change: function(e) {
        var row = this.select(),
            item = this.dataItem(row);
        
        console.log(item);
    }
});

function example(foo) {
    return "example: " + foo;   
}