JSFiddle - React, Tailwind, and code Playground

by Joel D'Souza

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="grid">
</div>
<div id="log"></div>

JavaScript

var handleChange = function(input, value) {
    $("#log").html(input.attr('name') + " Changed : " + value);
}

var dataSource = new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Products"
        },
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: { type: "number" },                    
                    ProductName: { type: "string" },
                    Discontinued: { type: "boolean" }
                }
            }
        },
        pageSize: 10,
        serverPaging: true,
        serverFiltering: true,
    });

$("#grid").kendoGrid({
    dataSource: dataSource,    
    pageable: true,
    editable: true,
    edit: function(e) {
        var value;        
        var numericInput = e.container.find("[data-type='number']");
        
        // Handle numeric
        if (numericInput.length > 0)
        {
            var numeric = numericInput.data("kendoNumericTextBox");    
        
            numeric.bind("change", function(e) {
                value = this.value();
                handleChange(numericInput, value);
            });
            
            return;
        }
        
        var input = e.container.find(":input");
        
        // Handle checkbox
        if (input.is(":checkbox"))
        {
            value = input.is(":checked");
            input.change(function(){
                value = input.is(":checked");
                handleChange(input, value);
            });
        }
        else
        {        
            // Handle text
            value = input.val();
            input.keyup(function(){
                value = input.val();
            });
            input.change(function(){
                value = input.val();
            });
            
            input.blur(function(){
                handleChange(input, value);
            });
        }
   ...