JSFiddle - React, Tailwind, and code Playground

by Casufi

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<script src="https://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<button id="exportxls" type="button">Xls</button>
<div id="grid"></div>

CSS

.selected {
    background: red;
    color: white;
}

JavaScript 1.7

var newsum = function(aggrs){
    return aggrs['Qty'].sum + aggrs['Amt'].sum;
};
var colsum = function(data){
    return (data['Qty'] * 1) + (data['Amt'] * 1);
};

var dataSource = new kendo.data.DataSource({
    data: [
        {ID:1, Type:"One", Qty: 10, Amt: 20},
        {ID:2, Type:"One", Qty: 11, Amt: 20},
        {ID:3, Type:"One", Qty: 23, Amt: 20},
        {ID:4, Type:"Two", Qty: 14, Amt: 20},
        {ID:5, Type:"One", Qty: 10, Amt: 20},
        {ID:6, Type:"One", Qty: 9, Amt: 20},
        {ID:7, Type:"One", Qty: 2, Amt: 20},
        {ID:8, Type:"One", Qty: 31, Amt: 20},
        {ID:9, Type:"One", Qty: 8, Amt: 20},
        {ID:10, Type:"One", Qty: 9, Amt: 20},
        {ID:11, Type:"One", Qty: 1, Amt: 20},
        {ID:12, Type:"Two", Qty: 43, Amt: 20},
        {ID:13, Type:"Two", Qty: 12, Amt: 20},
        {ID:14, Type:"Two", Qty: 5, Amt: 20},
        {ID:15, Type:"Two", Qty: 4, Amt: 20},
        {ID:16, Type:"Two", Qty: 7, Amt: 20},
        {ID:17, Type:"One", Qty: 1, Amt: 7}
    ],
    schema: {
        model: {
            id: "ID",
            fields: {
                Qty: {type: "number"},
                Amt: {type: "number"},
            },
        }
    },
    aggregate: [{field: "Qty",aggregate: "sum"}, {field: "Amt",aggregate: "sum"}]
});

var grid = $("#grid").kendoGrid({
    height: 350,
    groupable: true,
    dataSource: dataSource,
    columns: [{
        field: "Type",
        hidden: false
    },{
        field: "Something",
        hidden: true
    },{
        field: "Qty",
        footerTemplate: "#= sum #"
    }, {
        field: "Amt",
        template: "#='<input class=\"prodinp\" value='+data.Amt+'>'#"
    }, {
        field: "Total",
        template: "#= colsum(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...