JSFiddle - React, Tailwind, and code Playground
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.1129/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;">
Footer information
</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 },
dataSource: myDataSource,
sortable: true,
height: gridHeight(),
columns: [
{ field: "OrderID" },
{ field: "ShipName" },
{ field: "ShipCity" }
]
});
$("#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 - diff);
}
$(window).resize(function () {
resizeGrid();
});