JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="kendo.mobile.all.min.css">
<div id="grid"></div>
JavaScript
var arr = new kendo.data.ObservableArray([
{ Qty: 200, UnitPrice: 23 },
{ Qty: 300, UnitPrice: 22 }
]);
for (var i = 0; i < arr.length ; i++) {
var arrn = arr[i];
arrn.set("RAmount", function(){
var n = this.get("Qty") * this.get("UnitPrice");
return n
});
};
$("#grid").kendoGrid({
columns: [
{
field: "Qty",
title: "Qty"
},
{
field: "UnitPrice",
title: "UnitPrice"
},
{
title: "Amount",
template: "#: Qty * UnitPrice #"
},
],
editable: true,
dataSource: arr,
});