JSFiddle - React, Tailwind, and code Playground

by valchev

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.2.913/js/kendo.all.min.js"></script>
<div id="grid"></div>
<br />
<p><b>Log:</b></p>
<div id="log"></div>

JavaScript

var data = [
    {
        ProductID: 1,
        ProductName: "Product Name 1",
        KeyCode: 40,
        KeyDescription: null
    },
    {
        ProductID: 2,
        ProductName: "Product Name 2",
        KeyCode: null,
        KeyDescription: null
    },
    {
        ProductID: 3,
        ProductName: "Product 3",
        KeyCode: 18,
        KeyDescription: null
    }
];

var alertCounter = [0,0,0];
var descriptions = ["Description 1", "Description 2", "Description 3"];

$("#grid").kendoGrid({
    dataSource: {
        data: data,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductName: {
                        type: "string",
                        editable: false
                    },
                    KeyCode: {
                        type: "integer",
                        editable: true
                    },
                    KeyDescription: {
                        type: "string",
                        editable: false
                    }
                } // End of fields
            } // End of model
        }
    },
    scrollable: false,
    sortable: true,
    filterable: true,
    navigatable: true,
    editable: true,
    //save: save,
    edit: edit,
    columns: [
        {
            field: "ProductName",
            width: '150px',
        },
        {
            field: "KeyCode",
            width: '40px',
        },
        {
            field: "KeyDescription",
            title: "Key Description",
            template: "<div class='KeyDescription'>#= KeyDescription#</div>",
        }
    ]
});

function edit(e) {
    e.model.one("set", function(e) { 
        if(!confirm("You entered: " + e.field + " = " + e.value)) {
            e.preventDefault();
        }
    });  
}

function save(e) {  
    alertCounter[e.model.ProductID-1]++;  
    log(e.model.ProductName);
    log("<li>Count ("+ alertCounter[e.model.ProductID-1]+")");
    log("<li>Before...