JSFiddle - React, Tailwind, and code Playground

by Casufi

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 newsum = function(aggrs){
    return aggrs['Qty'].sum + aggrs['Amt'].sum;
};
var dataSource = new kendo.data.DataSource({
    data: [
        {ID:1, Qty: 10, Amt: 20},
        {ID:2, Qty: 11, Amt: 20},
        {ID:3, Qty: 23, Amt: 20},
        {ID:4, Qty: 14, Amt: 20},
        {ID:5, Qty: 10, Amt: 20},
        {ID:6, Qty: 9, Amt: 20},
        {ID:7, Qty: 2, Amt: 20},
        {ID:8, Qty: 31, Amt: 20},
        {ID:9, Qty: 8, Amt: 20},
        {ID:10, Qty: 9, Amt: 20},
        {ID:11, Qty: 1, Amt: 20},
        {ID:12, Qty: 43, Amt: 20},
        {ID:13, Qty: 12, Amt: 20},
        {ID:14, Qty: 5, Amt: 20},
        {ID:15, Qty: 4, Amt: 20},
        {ID:16, Qty: 7, Amt: 20},
        {ID:17, Qty: 1, Amt: 7}
    ],
    schema: {
        model: {
            id: "ID",
            fields: {
                Qty: {type: "number"},
                Amt: {type: "number"},
            },
            Total: function (item) {
                return (item['Qty'] * 1) + (item['Amt'] * 1);
            },

        }
    },
    aggregate: [{field: "Qty",aggregate: "sum"}, {field: "Amt",aggregate: "sum"}]
});

var grid = $("#grid").kendoGrid({
    height: 350,
    dataSource: dataSource,
    columns: [{
        field: "Qty",
        footerTemplate: "#= sum #"
    }, {
        field: "Amt",
        template: "#='<input class=\"prodinp\" value='+data.Amt+'>'#"
    }, {
        field: "Total(data)",
        footerTemplate: "#= newsum(data) #",
        title: "TotAll"
    }],
}).data("kendoGrid");

$(grid.element).on('keypress', 'input.prodinp', function (e) {
    if (grid) var dataItem = grid.dataItem($(this).closest("tr"));
    if (dataItem) {
        var target = this;
        if (grid && grid.send_timer) clearTimeout(grid.send_timer);
        grid.send_timer = setTimeout(function () {
            dataItem.set("Amt", $(target).val());
            console.log($(target));
            $(target).focus();
        }, 1000);
    }
});