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/
You can set the grid content height like this:
http://jsfiddle.net/jayanthakgjls/pbkBd/4/
You can calculate the height and set it in the
resize
event in the window: