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>
master grid :<br />
<div id="grid">
</div>
<div id="log"></div>
child grid :<br />
<div id="grid2">
</div>

JavaScript

var dataSample = [];
dataSample.push({OrderID:"1", ShipName:"line 1"});
dataSample.push({OrderID:"2", ShipName:"line 2"});
dataSample.push({OrderID:"3", ShipName:"line 3"});

var dataSource = new kendo.data.DataSource({
        data: dataSample,
        schema: {
            model: {
                id: "OrderID"               
            }
        },
        pageSize: 10
    });

$("#grid").kendoGrid({
    dataSource: dataSource,      
    selectable: true,
    columns: ["OrderID", "ShipName"],
    change: function() {
        var row = this.select();
        var id = row.data("id");        
        $("#log").html("selected row with id= " + id);
        // sample selecting same row on second grid 
        // based on this post
        var secondGrid = $("#grid2").data("kendoGrid");
        var row = secondGrid.table.find('tr[data-id="' + id + '"]');
        secondGrid.select(row);
        //Selecting Grid
var gview = $("#grid").data("kendoGrid");
//Getting selected item
var selectedItem = gview.dataItem(gview.select());
alert(selectedItem.ShipName);

    }
});


$("#grid2").kendoGrid({
    dataSource: dataSource,     
    selectable: true,
    columns: ["OrderID", "ShipName"]    
});