JSFiddle - React, Tailwind, and code Playground

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 dataSource = new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                id: "OrderID",
                fields: {
                    OrderID: { type: "number" },                    
                    ShipName: { type: "string" },
                    ShipCity: { type: "string"}
                }
            }
        },
        pageSize: 10,
        serverPaging: true,
        serverFiltering: true,
    });

$("#grid").kendoGrid({
      
    dataSource: dataSource,    
    pageable: true,
    editable: true,
    edit: function(e) {
        
        //-------------------------------------------------------//
        //----Checking if the ShipName and ShipCity are equal----//
        //-------------------------------------------------------//
        if(e.model.data.ShipName === e.model.data.ShipCity){
        $('#grid').data("kendoGrid").cancelRow();
       // $('#grid').data("kendoGrid").columns[0].lockColumn();
        }

        var input = e.container.find(".k-input");
        var value = input.val();
        input.keyup(function(){
            value = input.val();
        });
        $("[name='ShipName']", e.container).blur(function(){
            var input = $(this);
            $("#log").html(input.attr('name') + " blurred : " + value);
            var grid = $("#grid").data("kendoGrid");
            var row = $(this).closest("tr");
            var item = grid.dataItem(row);
            //alert("ShipCity is : " + item.ShipCity);
        });
    },
    columns: ["ShipName", "ShipCity"],
    change: function() {
        var row = this.select();
        var id = row.data("id");
        
        $("#log")
            .html("selected row with id= " + id + " \
                  , for ShipName = " + dataSource.get(id).get("ShipName"));
    }
});

$("#search").click(function() {    
    dataSource.filter({
   ...