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/2013.1.319/js/kendo.all.min.js"></script>
 <div id='grid' data-bind='source: items'>
                </div>

JavaScript

$("#grid").kendoGrid({
    sortable:true,
    toolbar: ["create", 'edit', 'save'],
    columns: [{field:'id',sortable:false}, {field:'Child.Contact.Email'}],
    editable: { mode: "incell"              
                        },
    rowTemplate:'<tr data-uid="#=uid#" role="row"><td  role="gridcell">${id}</td><td role="gridcell" >${Child.Contact.Email}</td></tr>',
    dataBinding:function(e){
        debugger;
        if(e.items.length>0 && e.items[0].isNew()){
            var added=e.items[0]
            added.set('Child',{Contact:{Email:"test"}});
            //e.items[0].Child={Email:"test"};
        }
    }
    
});
  
var data= 
    [{id: 1123, bool: true, Child:{Contact:{Email:"test"}}}, 
     {id: 223, bool: false, Child:{Contact:{Email:"test"}}}];
var model=( {
    highlight:function(){
       console.log(this.id);
    },
   
    items:new kendo.data.DataSource({
         transport: {
             create: function(options){
                 debugger
             },
                read:  function(options){
                    options.success(data);
             },
             update:  function(options){
                 debugger
             },
         },
        
        schema:{
            model: {
            id: "id",
            fields: {
                bool: {  },
                id:{},
               // "Child.Contact.Email": ""
            }
            }
        }
               
    })
});
kendo.bind($("#grid"),kendo.observable(model));