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">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="grid"></div>
<button onclick="add();">Add</button>

JavaScript

var ds = new kendo.data.DataSource({
data: [
    {id: 1, name: "item1", value: 222},
    {id: 2, name: "item2", value: 222},
    {id: 3, name: "item3", value: 222},
    {id: 4, name: "item4", value: 222},
    {id: 5, name: "item5", value: 222},
    {id: 6, name: "item6", value: 222},
    ],
    schema: {
        model: {
            id: "id",
            fields: {
                id: {type: "number", editable: false},
                name: {type: "string"},
                value: {type: "number", defaultValue: 111}
            }
        }
    }//,
    //sort: {field: "id", dir: "desc"}
})

/*var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable: true
}).data("kendoGrid");
*/
function add() {
    alert('in add');
    //var newItem = grid.dataSource.insert(3, {id: 0});
    
    alert('in add');
    

   // grid.editRow($("tr[data-uid=" + newItem.uid + "]"));
}