How to make kendo grid fill 100% height between header and footer within a JQuery UI Dialog?

Question

I have a jquery UI dialog that has to have its height and width dynamically set after it opens. This contains a header div, kendo grid, and footer div. What I would like to do is to make the kendo grid scroll rather than the dialog; the dialog actually has to be be overflow:hidden for other reasons. In other words, I need the kendo grid (content) to fill 100% of the space between the footer and header. I am using knockout, knockout-kendo as well.

<div id="popup">
    <div id="header">
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
    </div>
    <div data-bind="kendoGrid: items"> </div>
    <div id="footer">
        <p><a href="#">CLOSE</a></p>
    </div>
</div>

JSFIDDLE:http://jsfiddle.net/pbkBd/2/

I have attempted using this example to set the content height but not have been able to get this to work with my scenario: http://jsfiddle.net/dimodi/MjKmJ/

Answer 1

You can set the grid content height like this,

 $(".k-grid-content").height('200');

http://jsfiddle.net/jayanthakgjls/pbkBd/4/

you can calculate the height and set it in the resize event in the window,

 resize: function() {
    // user has finished resizing the window
      var height=<calculate Height>
     $(".k-grid-content").height(height);
 }

Answer 2

I use the following style to force the grid to fill:

.fillContainerGrid 
{
    height: 100%;
    width: 100%;
}
.fillContainerGrid > .k-grid-content {
    position: absolute;
    top: 69px;
    bottom: 0;
    left: 0;
    right: 0;
}
.fillContainerGrid> .k-pager-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}