JSFiddle - React, Tailwind, and code Playground

by RichardAD

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.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<div id="master"></div>
<div id="detail"></div>

JavaScript

var masterDS = new kendo.data.DataSource({
         transport: {
                 read: {
                     url: 'http://devenezia.com/kendo/fetch.php',
                         cache: false,
                         data: { file: 'master.xml' }
                 }
         },
         schema: {
                 type: 'xml',
                 data: '/TABLE/ITEMS',
                 model: {
                         fields: {
                                   item: "item/text()"
                         }
                 }
         }
 });
 

var masterGrid;

var detailDS = new kendo.data.DataSource({
        transport: {
                read: {
                        url: 'http://devenezia.com/kendo/fetch.php',
                        cache: false,
                        data: {
                                file: function() {
                                        var item = masterGrid.select().text();
                                        return 'detail'+item+'.xml';
                                }
                        }
                }
        },
        schema: {
                type: "xml",
                data: "/TABLE/STORES",
                model: {
                        fields: {
                                  store: "store/text()"
                                , city:  "CITY/text()"
                                , state: "STATE/text()"
                                , zip:   "ZIP/text()"
                        }
                }
        }
});


$("#master").kendoGrid({
        columns: ['item'],
        dataSource: masterDS,
        selectable: true,
        change: function(){
                detailDS.read();
        }
});
masterGrid = $('#master').data('kendoGrid');


$("#detail").kendoGrid({
        columns: [ 'store', 'city', 'state', 'zip' ],
        groupable: true,
        dataSource: detailDS,
        autobind: false
});