JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.229/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",
                fields: {
                    ShipName: "ShipName",
                    OrderID: "OrderID"
                }
            }
        },
        pageSize: 10
    });

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


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