Setting Kendo UI grid height 100% of wrapper

Question

I know there is an easy way to set fixed height of a Kendo UI grid through their API but for our specific needs, I need to make the grid expand in full height of its wrapper.

With the following markup structure, I set .wrapper to height:600px and I tried to give .k-grid-content height:100% but it doesn't expand. #grid expands to 100% with height:100% but I need the inside contents to expand as well. How do I achieve that?

Here is the demo JS BIN

<div class="wrapper">
    <div id="grid">
        <div class="k-grid-header"></div>
        <div class="k-grid-content"></div>
        <div class="k-grid-pager"></div>
    </div>
</div>

Answer 1

According to one of Kendo's tech support team; Dimo Dimov. You should set the height of one container, and everything inside should be set to 100% (including the grid). Then you manually adjust the content height on document ready and window resize.

See here for his example:

http://jsfiddle.net/dimodi/SDFsz/

See here for yours updated with a js function to set the height of the wrapper to the window height.

http://jsbin.com/yumexugo/1/edit

Essentially the content is resized with:

function resizeGrid() {
    var gridElement = $("#grid"),
        dataArea = gridElement.find(".k-grid-content"),
        gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function(){
        otherElementsHeight += $(this).outerHeight();
    });
    dataArea.height(gridHeight - otherElementsHeight);
}

and the wrapper is sized with (you may need to modify this to suit your layout):

function resizeWrapper() {
    $("#outerWrapper").height($('#body').innerHeight());
}

Document ready and window resize both call:

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

Relevant css:

#grid {
  height: 100%;
}

#outerWrapper{
  overflow: hidden;
}