JSFiddle - React, Tailwind, and code Playground

by Joel D'Souza

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.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<div id="myLayout" class="k-content" style="background-color:Gray; height:100%;">
    <div id="contentArea" style="background-color:Silver;">
      <div id="myList"></div>
    </div>
    <div id="footer" style="background-color:Silver;">
        Click on ShipCity to trigger custom editor
    </div> 
</div>

JavaScript

var myDataSource = new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                id: "OrderID",
                fields: {
                    OrderID: { type: "number" },                    
                    ShipName: { type: "string" },
                    ShipCity: { type: "string" }
                }
            }
        },
        pageSize: 50,
        serverPaging: true,
        serverFiltering: true,
    });

var $footer = $("#footer");

var gridHeight = function () {
    return $(window).height() - $footer.height() - 2;
}

var $grid = $("#myList").kendoGrid({
    scrollable: { virtual: true },
    editable: true,
    dataSource: myDataSource,
    sortable: true,
    height: gridHeight(),
    columns: [
        { field: "OrderID" },
        { field: "ShipName"},
        { field: "ShipCity", 
            editor: function(container, options) {
                $('<input name="' + options.field + '"/>').appendTo(container).kendoComboBox({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: 'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipCity'
                        }
                    },
                    dataValueField: "ShipCity",
                    dataTextField: "ShipCity",
                    autobind: false
                });
            }
        }
      ]
});

$("#rootLayout").kendoSplitter({
    orientation: "vertical",
    panes: [
        { scrollable: false, collapsible: false, size: "90%" },
        { collapsible: true, size: "10%" }
    ]
});

var resizeGrid = function () {
    var dataArea = $grid.find(".k-grid-content");
    var newHeight = gridHeight();
    var diff = $grid.innerHeight() - dataArea.innerHeight();

    $grid.height(newHeight);
    dataArea.height(newHeight -...