JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.debug.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/kendo.web.min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
<link rel="stylesheet" href="http://rniemeyer.github.io/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.io/knockout-kendo/css/kendo.default.min.css">
<div id="popup">
<div id="header">
<p>blah</p>
<p>blah</p>
<p>blah</p>
</div>
<div data-bind="kendoGrid: items"> </div>
<div id="footer">
<p><a href="#">CLOSE</a></p>
</div>
</div>
CSS
#popup { overflow: visible; }
#header { background: green; }
#footer { background: blue; }
JavaScript
var ViewModel = function() {
var self = this;
self.items = ko.observableArray([
{ id: "1", name: "apple"},
{ id: "2", name: "orange"},
{ id: "3", name: "banana"},
{ id: "11", name: "apple"},
{ id: "21", name: "orange"},
{ id: "31", name: "banana"},
{ id: "12", name: "apple"},
{ id: "22", name: "orange"},
{ id: "32", name: "banana"},
{ id: "13", name: "apple"},
{ id: "23", name: "orange"},
{ id: "33", name: "banana"},
{ id: "14", name: "apple"},
{ id: "24", name: "orange"},
{ id: "34", name: "banana"},
{ id: "15", name: "apple"},
{ id: "25", name: "orange"},
{ id: "35", name: "banana"},
{ id: "16", name: "apple"},
{ id: "26", name: "orange"},
{ id: "36", name: "banana"},
{ id: "17", name: "apple"},
{ id: "27", name: "orange"},
{ id: "37", name: "banana"}
]);
}
ko.applyBindings(new ViewModel());
$(popup).dialog(
{
open: function( event, ui ) {
$(this).dialog('option', 'height', 500);
$(this).dialog('option', 'width', 600);
}
}
);