JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<div id="example" class="k-content">
<div id="grids"></div>
<button id="btnCreateGrid">Create Grid</button>
</div>
JavaScript
var createGrid = function (){
var grids = $('#grids');
var newGrid = $("<div></div>");
var removeButton = $("<button>RemoveGrid</button>");
removeButton.on('click', function (){
var kendoGrid = newGrid.data('kendoGrid');
kendoGrid.destroy();
newGrid.remove();
removeButton.off();
removeButton.remove();
});
grids.append(removeButton);
grids.append(newGrid);
createGridControl(newGrid);
};
var createGridControl = function (gridControl) {
gridControl.kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 200,
filterable: true,
sortable: true,
pageable: true,
selectable: true,
scrollable: {
virtual: true
},
columns: [{
field:"OrderID",
filterable: false
...