JSFiddle - React, Tailwind, and code Playground
HTML
<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.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<div id="grid"></div>
CSS
.selected{
background: red;
color: white;
}
JavaScript
var dataSource = new kendo.data.DataSource({
data: [{
Qty: 10,
Amt: 20,
Total: 200,
start:'11/12/2018',
end:'11/19/2018',
Duration:''}],
schema: {
model: {
//id: "ID",
fields: {
Qty: {
type: "number"
},
Amt: {
type: "number"
},
Total: {
type: "number"
},start: {
type: "date"
},
end: {
type: "date"
}
}
}
},
pageSize: 4
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: ["Qty", "Amt", { field: "start", title:"start", width: "100px", format: "{0:MM/dd/yyyy}" },
{ field: "end", title:"end", width: "100px", format: "{0:MM/dd/yyyy}"}, {title:"Duration", width: "100px",template: "#= calculateDates(start, end) #Days"},
{
field: "Total",
editor: function(cont, options) {
alert('aa');
$("<span>" + options.model.Total + "</span>").appendTo(cont);
}}],
editable: true,
save: function(data) {
if (data.values.Qty) {
alert('aa');
var test = data.model.set("Total", data.values.Qty * data.model.Amt);
var diff = Math.round((data.values.start - data.model.end)/1000/60/60/24);
var testone =data.model.set("Duration", diff);
/* var test = data.model.set("Total", data.model.Qty * data.values.Amt);
alert(data.values.start );
alert(data.values.end );
var diff = Math.round((data.values.start - data.values.end)/1000/60/60/24);
alert(diff);
var testone =data.model.set("Duration", diff); */
}
else {
alert('a');
...