JSFiddle - React, Tailwind, and code Playground
HTML
<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.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.silver.min.css">
<style type="text/css">
.k-green, .k-green.k-button:hover { background-color: Green; color: White; }
.k-red, .k-red.k-button:hover { background-color: Red; color:White; }
.k-button { color: White }
</style>
<div id="grid"></div>
JavaScript
$("#grid").kendoGrid({
dataSource: {
data:[
{"AcknowledgementDate": null, "ExpirationDate": "5/5/2012", "Foo1": "foo!", "Content": "Here is some content", "Number": "1", "Name": "name01", "User": "user01", "CreatedDate": "5/4/2012", "ReceivedDate":"5/4/2012", "ThresholdDate": "5/9/2012"},
{"AcknowledgementDate": null, "ExpirationDate": "5/5/2012", "Foo1": "foo!", "Content": "Here is some content", "Number": "1", "Name": "name01", "User": "user01", "CreatedDate": "5/4/2012", "ReceivedDate":"5/4/2012", "ThresholdDate": "5/2/2013"},
{"AcknowledgementDate": "5/9/2012", "ExpirationDate": "5/5/2012", "Foo1": "foo!", "Content": "Here is some content", "Number": "1", "Name": "name01", "User": "user01", "CreatedDate": "5/4/2012", "ReceivedDate":"5/4/2012", "ThresholdDate": "5/9/2012"},
{"AcknowledgementDate": "5/9/2012", "ExpirationDate": "5/5/2012", "Foo1": "foo!", "Content": "Here is some content", "Number": "1", "Name": "name01", "User": "user01", "CreatedDate": "5/4/2012", "ReceivedDate":"5/4/2012", "ThresholdDate": "5/9/2012"},
{"AcknowledgementDate": "5/9/2012", "ExpirationDate": "5/5/2012", "Foo1": "foo!", "Content": "Here is some content", "Number": "1", "Name": "name01", "User": "user01", "CreatedDate": "5/4/2012", "ReceivedDate":"5/4/2012", "ThresholdDate": "5/9/2012"}
]
},
columns: [
{ template: '#if (AcknowledgementDate == null) { if (ThresholdDate <= new Date()) { # <a class="k-button k-red">Acknowledge</a> # } else { # <a class="k-button k-green">Acknowledge</a> # } } else { # #= User # # } #', width: 150 },
{ field: "AcknowledgementDate", template: '# if (AcknowledgementDate == null) { # # } else { # #= kendo.toString(AcknowledgementDate,"MM-dd-yyyy hh:mm") # # } #' , title: "AcknowledgementDate", width: 220 },
{ field: "ExpirationDate", template: '#= kendo.toString(ExpirationDate,"MM-dd-yyyy hh:mm") #',...