JSFiddle - React, Tailwind, and code Playground

by RichardAD

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="TestDiv">
<div data-template="TestTemplate" data-bind="source: Settings"></div>
<script id="TestTemplate" type="text/x-kendo-template">
 <div>
    <span id="txtCategory-${uid}" data-bind="text: categoryText"></span>
 </div>
 <div>
           <select id="ddlTest-${uid}"
           data-role="dropdownlist"
           data-text-field="Text"
           data-value-field="Value"
           data-bind="source: myoptions, value:sourceTypeId"></select>
  </div>
</script>
</div>

JavaScript

var data = [
  { categoryText: "Test1",
  	myoptions: [{ Text: "Test1", Value: 0 }, { Text: "Test2", Value: 1 }],
    sourceTypeId: 0 },
  { categoryText: "Test2",
  	myoptions: [{ Text: "Test10", Value: 0 }, { Text: "Test20", Value: 1 }],
    sourceTypeId: 1 },
  { categoryText: "Test3",
  	myoptions: [{ Text: "foo", Value: 0 }, { Text: "bar", Value: 1 }],
    sourceTypeId: 3 },
];

$( document ).ready(function() {

	console.log(data);
	console.log(window);
  console.log(kendo);

  var viewModel = kendo.observable({
    Test: "foo",
    Settings: data
  });

	console.log(viewModel);
  
	kendo.bind($("#TestDiv"), viewModel);  
});