JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<div id="personGrid" data-role="grid" data-bind="source: masterDataSource"
    data-editable="true" data-selectable="true" data-change="masterChange"></div>

<div id="phoneNumbersGrid" data-role="grid" data-bind="source: detailDataSource"
    data-editable="true" ></div>
<button type="button" data-bind="click: showMasterData">Show Master Data
</button>
<span id="masterSource"></span>

JavaScript

var data = [{recordId: 1, firstName: "firstName1",lastName: "lastName1",
             phoneNumberDTOs: [{id: 1,phoneNo: "111111111"},{id: 2,phoneNo: "222222222"}]
            },
           {recordId: 2, firstName: "firstName2",lastName: "lastName2",
            phoneNumberDTOs: [{id: 3,phoneNo: "333333333"},{id: 4,phoneNo: "444444444"}]}];

var viewModel = kendo.observable({
    masterDataSource:new kendo.data.DataSource({
            data: data,
            schema: {
                model: {
                  id: "recordId",
                  fields: {
                     recordId: { editable: false, nullable: true },
                     firstName: { validation: { required: true } },
                     lastName: {validation: { required: true } },
                     phoneNumberDTOs: {defaultValue: []}
                  }
                }
            }
         }),
    detailDataSource: new kendo.data.DataSource({
                data: [],
                schema: {
                    model: {
                      id: "id",
                      fields: {
                         id: { editable: false, nullable: true },
                         phoneNo: { type: "string" }                         
                      }
                    }
                }
         }),
    showMasterData: function(e){
        $("#masterSource").html(kendo.stringify(this.masterDataSource.data().toJSON()));
    }        
});
function masterChange(e){
     var item = this.dataItem(this.select());               
     var grid = $("#phoneNumbersGrid").show().data("kendoGrid");
     grid.dataSource.data(item.phoneNumberDTOs);
}

kendo.bind($("body"),viewModel);