JSFiddle - React, Tailwind, and code Playground

by korchev

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}],
    schema: {
        model: {
            //id: "ID",
            fields: {
                Qty: {
                    type: "number"
                },
                Amt: {
                    type: "number"
                },
                Total: {
                    type: "number"
                }
            }
        }
    },
    pageSize: 4
});

$("#grid").kendoGrid({
    dataSource: dataSource,
    columns: ["Qty", "Amt",
    {
        field: "Total",
        editor: function(cont, options) {
            $("<span>" + options.model.Total + "</span>").appendTo(cont);
        }}],
    editable: true,
    save: function(data) {
         if (data.values.Qty) {
            var test = data.model.set("Total", data.values.Qty * data.model.Amt);
        }
        else {
            var test = data.model.set("Total", data.model.Qty * data.values.Amt);
        }
    }
});