JSFiddle - React, Tailwind, and code Playground

by Bladetrick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="container" style="width: 100%; height: 100%">
        <div id="divMenu" style="border: 1px solid black; height: 30px; width: 100%; display: block; float: left; background-color: black;"></div>
    <div id="divResizer" style="border: 1px solid red; height: 300px; width: 100%; display: block; float: left; background-color: red;"></div>
    <div id="grid" style="float: left;"></div>
</div>

CSS

html,
body
{
    margin:0;
    padding:0;
    height:100%;
}
html
{
    overflow:hidden;
}

JavaScript

function resizeGrid() {
    var gridElement = $("#grid");
    var dataArea = gridElement.find(".k-grid-content");
    var newHeight = gridElement.parent().innerHeight() - 2;
    var diff = gridElement.innerHeight() - dataArea.innerHeight();
    gridElement.height(newHeight);
    dataArea.height(newHeight - diff - 100);
}

$(window).resize(function(){
    resizeGrid();
});

$('#divMenu').click(function () {
    $('#divResizer').toggle();
    var winheight = $('#container').css('height').replace('px','');
    
    $('#divResizer').css('height','50px');
    var gridheight = $('#divResizer').css('height').replace('px','');
    resizeGrid();
    //$('#grid').css('height', winheight-gridheight + 'px');
});

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: { type: "number" },
                    ShipName: { type: "string" },
                    ShipCity: { type: "string" }
                }
            }
        },
        pageSize: 10,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    height: 450,
    filterable: true,
    sortable: true,
    pageable: true,
    dataBound: resizeGrid,
    columns: [{
            field:"OrderID",
            filterable: false
        },
        "ShipName",
        "ShipCity"
    ]
});