JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<div id="grid"></div>
CSS
.selected{
background: red;
color: white;
}
JavaScript
var dataSource = new kendo.data.DataSource({
data: [{
Qty: 10,
Amt: 20,
}],
schema: {
model: {
//id: "ID",
fields: {
Qty: {
type: "number"
},
Amt: {
type: "number"
}
},
Total: function() {
return this.Qty * this.Amt;
}
}
},
pageSize: 4
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
"Qty",
"Amt",
{
field: "Total()",
title: "Total"
}
]
});