JSFiddle - React, Tailwind, and code Playground

by chanaka1

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<button id="buttonParent">Get Selected Parent</button>
<button id="buttonChild">Get Selected Child</button>
<div id="grid"></div>

JavaScript

var parentsModel = [
    {
    Id: 1,
    Name: "A"},
{
    Id: 2,
    Name: "B"},
{
    Id: 3,
    Name: "C"},
{
    Id: 4,
    Name: "D"},
{
    Id: 5,
    Name: "E"},
    ];

var childrenModel = [
    {
    Id: 10,
    SubName: "AA"},
{
    Id: 11,
    SubName: "BB"},
{
    Id: 12,
    SubName: "CC"},
{
    Id: 13,
    SubName: "DD"},
{
    Id: 14,
    SubName: "EE"}
];

$(document).ready(function() {
    function detailInit(e) {
        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: childrenModel,
            selectable: "multiple row",
            change: function(selectedEvent){
                alert('Selection Changed');
            }
        });
    };

    $("#grid").kendoGrid({
        dataSource: parentsModel,
        detailInit: detailInit,
        selectable: "multiple row"
    }).data("kendoGrid");
    
    $('#buttonParent').on('click', function (){
        alert(
            $("#grid").data('kendoGrid').dataItem(
                $("#grid").data('kendoGrid').select()[0]));
    });
});