function resizeGrid() {
//Check if grid is available
if (!$("#grid").length) {
return;
}
//Initialize some variables
var bottomPadding = 10;
var minimumAcceptableGridHeight = 250;
var combinedElementHeight = bottomPadding;
var windowHeight = $(window).innerHeight();
var grid = $("#grid");
//Calcualte all Grid elements height except the content
var otherGridElements = grid.children().not(".k-grid-content"); //This is anything other than the Grid iteslf like header, commands, etc
otherGridElements.each(function () {
combinedElementHeight += $(this).outerHeight(true);
});
//Lets start from the Grid
var currentElement = grid;
//Lets loop until it reaches the topmost element the <Body>
while (!currentElement.is("body")) {
//The parent of the element
var currentParentElement = currentElement.parent();
//Get same level elements apart from the current element
var currentElementSiblings = currentParentElement.children()
.not(currentElement)
.not("script");
//Combine all the heights of those elements
currentElementSiblings.each(function () {
combinedElementHeight += $(this).outerHeight(true);
console.debug($(this));
console.debug($(this).outerHeight(true));
});
//Set the current element to the the Parent.
currentElement = currentParentElement;
}
//Calculate the final height
combinedElementHeight = windowHeight - combinedElementHeight;
var finalHeight = combinedElementHeight < minimumAcceptableGridHeight ? minimumAcceptableGridHeight : combinedElementHeight;
//Apply the height for the content area
var contentArea = grid.find(".k-grid-content");
contentArea.height(finalHeight);
}
$(window).resize(function () {
resizeGrid();
});
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipName: { type: "string" },
ShipCountry: { type: "string" },
Freight: { type: "decimal" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
filterable: true,
sortable: true,
pageable: true,
dataBound: resizeGrid,
columns: [{
field: "OrderID",
filterable: false
},
"ShipName",
"ShipCountry",
"Freight"
]
});
<!-- Full article at http://wp.me/p4JH2A-Ic -->
<body>
<div id="header-content">This is a header, place where you usually add your menu</div>
<div id="main-content">
<h1>Top Section</h1>
<div id="grid"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ultricies sem ut metus elementum, nec cursus nulla dictum. Nam facilisis neque eu sodales ultricies. Pellentesque faucibus justo eget urna viverra, eget maximus lectus varius. Vivamus consectetur tellus at pulvinar finibus. Donec ipsum ligula, placerat in tincidunt in, sollicitudin sed ante. Maecenas eu urna elementum, porta sapien at, ornare lectus. Sed interdum magna at lectus aliquam imperdiet. Mauris ultrices erat a tincidunt pellentesque. Pellentesque sit amet lacinia nisi. Morbi sollicitudin, sapien congue eleifend rhoncus, sem est iaculis arcu, nec mattis turpis urna ac nisl. Duis eleifend vehicula convallis. Fusce est neque, efficitur vel rhoncus vitae, condimentum non risus. Ut consequat egestas dui, in condimentum arcu auctor ac. Morbi volutpat facilisis velit, quis faucibus dui dictum at. Etiam ullamcorper libero blandit blandit accumsan. Fusce sagittis justo nisl, et semper ipsum aliquam in.</p>
</div>
</body>