JSFiddle - React, Tailwind, and code Playground

by mastamm

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<div id="testview">
  <div data-role="listview" data-template="test-template" data-bind="source: rootEntityViewModel.TestList"></div>
</div>

<script id="test-template" type="text/x-kendo-template">
  <dl>
    <dd>${displayName}</dd>
    <dd><select data-role="dropdownlist" data-text-field="text" data-value-field="value" data-bind="source: getTestValues, value: op0"></select>          
    </dd>  
    
      <dd><input type="text" data-bind="value: op0"</dd>
  </dl>
</script>

JavaScript

var viewModel = kendo.observable({
    rootEntityViewModel: {
        TestList: [{ row: 1, fieldName: "LastName", displayName: "Last Name", dataType: "string", op0: ""  },
{ row: 2, fieldName: "FirstName", displayName: "First Name", dataType: "string", op0: ""  }]
    },
    getTestValues: function() {
        return getGlobalValues();
    }
});

kendo.bind($("#testview"), viewModel);

function getGlobalValues() {
    return [{text: "Test Item 1", value: "1"},{text: "Test Item 2", value: "2"},{text: "Test Item 3", value: "3"},{text: "Test Item 4", value: "4"}];
}