JSFiddle - React, Tailwind, and code Playground

by aoliveira

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<div id="area1">
    Select Thing1: <select data-role="dropdownlist" data-value-field="name" data-text-field="name"
                         data-bind="source: things1"></select>
</div>
<div id="area2">
    Select Thing2: <select data-role="dropdownlist" data-value-field="name" data-text-field="name"
                         data-bind="source: things2"></select>
</div>
<br />
<div id="area3">
    <div id="grid" data-role="grid" data-bind="source: gridData, events: { change: changeGrid }"></div>                
</div>

JavaScript

var vm1 = kendo.observable({
    things1: [{ name: 'Hello'},{ name: 'World' }],
    things2: [{ name: 'Ola'},{ name: 'Mundo'}]
});

var vm2 = kendo.observable({
    gridData: [
        { name: 'John', age: 10 },
        { name: 'Sally', age: 12 }
    ],
    changeGrid: function() {
        console.log("The grid is changing");        
    }
});

$('#grid').kendoGrid({
    selectable: "row"
});

kendo.bind(document.body,vm2);
kendo.bind(document.body,vm1);