JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.aspnetmvc.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.web.min.js"></script>
<h1>
<table id="cities"></table>
<table id="states"></table>
</h1>

CSS

tbody{
color:green
}

JavaScript

var usStates = [{
    State: 'ALABAMA',
    abbreviation: 'AL'
}, {
    State: 'ALASKA',
    abbreviation: 'AK'
}, {
    State: 'Texas',
    abbreviation: 'TX'
}, {
    State: 'ARIZONA',
    abbreviation: 'AZ'
}];

var cities = {
    'AL': [{
        City: 'Birmingham'
    }, {
        City: 'Montgomery'
    }],
        'AK': [{
        City: 'Anchorage'
    }, {
        City: 'Fairbanks'
    }, {
        City: 'Juneau'
    }],
        'AZ': [{
        City: 'Phoenix'
    }, {
        City: 'Tucson'
    }], 
    		'TX': [{
         City: 'Fort worth'
    }, {
         City: 'Dallas'
        }]
};


// Grid initialization

$("#states").kendoGrid({
    dataSource: {
        data: usStates
    }
});


$("#cities").kendoGrid({
    dataSource: {
        data: cities['AL']
    }
});


// Bind click event on first grid

$("#states tbody").on("click", "tr", changeState);

changeState.call($("#states tbody tr:first"));


function changeState() {
    var $this = $(this), // selected row -> jQuery object
        statesData = $("#states").data("kendoGrid").dataSource,
        selectedRow = statesData.getByUid($this.data("uid")), // selected row -> data
        citiesData = $("#cities").data("kendoGrid").dataSource;
    
    
    citiesData.data(cities[selectedRow.abbreviation]);

    $("#states").find(".k-state-focused").removeClass("k-state-focused");
    $this.addClass("k-state-focused");
   
}