Kendo UI

jQuery + Kendo UI + MockJax + Knockout

HTML

<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.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.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="consumers"><option></option></select>
</script>

<script id="consumerTemplate" type="text/x-kendo-tmpl">
    <input type="checkbox" name="${ data.Name }" value="${ data.Name }" ${ data.IsSelected ?"checked" : "" } />
    <span>${ data.Name }</span>
</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"} }
    }),
    lastTarget = document.body;

$("#grid").kendoGrid({
   dataSource: dataSource,
   height: 200,
   scrollable: {
     virtual: true
   },
   dataBound: function(e) { 
       this.element.find(".consumers").each(function() {
           // Get the matching grid data row.
           var id = $(this).closest("tr").data("id");
           var consumers = dataSource.get(id).data.Consumers;
           var dd = $(this).kendoDropDownList({
               dataSource: consumers,
               template: $("#consumerTemplate").html()
           }).data("kendoDropDownList");
           
          
           dd.popup.bind("close", function(e) { 
               if ($.contains(this.element[0], lastTarget)) { 
                   e.preventDefault();
               } 
               lastTarget = document.body;
           });
       });
   },
   columns: [
       { 
         name: "Consumers", 
         template: $("#consumersTemplate").html()
       }
   ],
   
   selectable: true
});