JSFiddle - React, Tailwind, and code Playground

by underlog

HTML

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="https://getfirebug.com/firebug-lite.js"></script>

<table id="grid" height="300px">
    <thead>
        <tr>
            <th data-field="Consumers">Content</th>
        </tr>
    </thead>
</table>
   
<script id="consumersTemplate" type="text/x-kendo-tmpl">
    <select class="foo"></select>
</script>

<script id="consumerTemplate" type="text/x-kendo-tmpl">
    <input type="checkbox" name="#= Name #" value="#= Name #" 
    # if (IsSelected) { # 
        checked
    # }
    /> 
</script>

JavaScript

var dataSource = kendo.data.DataSource.create({
    data: [ 
        { id: 1, Consumers: [ { Name: "John", IsSelected: false }, { Name: "Jane", IsSelected: true } ] }, 
        { id: 2, Consumers: [ { Name: "John", IsSelected: true }, { Name: "Jane", IsSelected: false} ] } 
    ], 
    schema: { model: {id: "id"} }
    });
$("#grid").kendoGrid({
   dataSource: dataSource,
   height: 200,
   scrollable: {
     virtual: true
   },
   dataBound: function(e) { 
       this.element.find(".foo").each(function() {
           // Get the matching grid data row.
           var id = $(this).closest("tr").data("id");
           var dataRow = dataSource.get(id).data.Consumers;
           $(this).kendoDropDownList();
       });
   },
   columns: [
       { 
         name: "Consumers", 
         template: $("#consumersTemplate").text(),
       }
   ],
   
   selectable: true
});