JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<div id="divContainer">
<div id="grid" style="height:200px"></div>
</div>

JavaScript

var dataSource = new kendo.data.DataSource({
    data: [
        { "ModelID": 1, "TheNumber":12, "Text": "Test" }
    ],
   
    schema: {
        model: {
            id: "ModelID",
            fields: {
                TheNumber: { editable: true, type:"number"},
                Text: { editable: false, type:"string"}
            }
        }
    },
    change: function(e) { 
        alert(dataSource.data()[0].TheNumber) 
    }
});

function editTemplate(container, options){
    $('<input type="number" class="k-textbox" required="required" min="10" name="TheNumber" />')
        .appendTo(container)
}

$(document).ready(function (){
        
    $("#grid").kendoGrid({
        dataSource: dataSource,
        columns: [{
            field: "TheNumber", 
            title: "The Number", 
            editor: editTemplate, 
            width:"50px"
        },{
            field: "Text", 
            title: "Text", 
            width:"50px"
        }],
        scrollable: true,
        pageable: false,
        sortable: true,
        filterable: false,
        resizable: true,
        editable: true
    });
});