Set Kendo grid height to match its container - asp.net-mvc

Question

I've got a Kendo grid:
<section class="main-window">
#model IEnumerable<SustIMS.Models.ModelTest>
<div class="clear-both">
<div class="field-value" style="height: 30px; border-bottom: 1px solid black">
</div>
<div id="datagrid">
#(Html.Kendo().Grid(Model)
.Name("datagrid_Concessoes")
.Columns(columns =>
{
columns.Bound(c => c.Id).Width(70);
columns.Bound(c => c.Code);
columns.Bound(c => c.Description);
columns.Bound(c => c.CreationDate);
columns.Bound(c => c.CreationUser);
})
.Scrollable()
.Sortable()
.Selectable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetAutoEstradas", "MasterData"))
)
)
</div>
</div>
</section>
Here's the section CSS:
.main-window
{
border: 2px solid gray;
border-radius: 2px;
width: 95%; height: 70%;
background-color: White;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
box-sizing: border-box;
}
I want the Kendo grid to have the height of its container. I've tried the
.Scrollable(s => s.Height(200))
but it only accepts values in pixels, not in percentage.
How can I set the Kendo grid to fit its container div/section?
PS: I've checked this question but didn't find a solution for me

Answer 1

I was able to get it work by setting height in the onDataBound event handler, like so:
<div id="datagrid">
#(Html.Kendo().Grid<Model>()
.Name("datagrid_Concessoes")
.Columns(columns =>
{
columns.Bound(c => c.Id).Width(70);
columns.Bound(c => c.Code);
columns.Bound(c => c.Description);
columns.Bound(c => c.CreationDate);
columns.Bound(c => c.CreationUser);
})
.Scrollable()
.Sortable()
.Selectable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetAutoEstradas", "MasterData"))
)
.Events(events => events.DataBound("grid1_onDataBound"))
)
function grid1_onDataBound(e) {
$("#datagrid .k-grid-content").attr("style", "height: auto");
}

Answer 2

Remove the .Scrollable() method. Scrollable() forces a fixed height on the grid.

Answer 3

Remove height propery from grid. Sample GridID = #grid
Add DataBound Event to grid;
Events(j=>j.DataBound("DataBound"))
Add Css;
html, body { margin:0; padding:0; height:100%; }
#grid { height: 100%; }
#outerWrapper{ background-color: red; overflow: hidden; }
.k-grid td { white-space: nowrap; overflow: hidden; }
Add Javascript;
function resizeGrid() {
$(".k-grid-content").css({ height: $(".k-grid-content")[0].scrollHeight });
}
setTimeout(function () {
resizeGrid();
}, 150);
i have 10 row grid and content within the grid has a calculated height.

Answer 4

In the grid you can set the height via the htmlattributes section something like this:
.HtmlAttributes(new { style = "height:600px;" })
or
.HtmlAttributes(new { class= "main-window" })
Having tested this on my grid this should work for you:
$(document).ready(function () {
//Get the current window height
var windowHeight = $(window).height();
//record the value of the height to ensure it is showing correctly.
console.log("Original Height" + windowHeight);
//multiply this height by a percentage e.g. 70% of the window height
windowHeight = windowHeight * 0.7;
//record the new modified height
console.log("Modified Height" + windowHeight);
//find my grid and the grid content and set the height of it to the new percentage
$("#baseGrid .k-grid-content").height(windowHeight);
});

Answer 5

I derived my solution from David Shorthose's above. I also needed my grid to resize when the window resized. My page also has a header and footer section which is 225px, so I subtract that out rather than using a percentage. Here is the script I added to my page:
<script>
$(function () {
resizeGrid();
});
$(window.onresize = function () {
resizeGrid();
})
function resizeGrid() {
$("#gridname").height($(window).height() - #Settings.TopBottomMarginHeight);
}
</script>
I moved the 225px into a settings class for easy re-use, which looks like this:
namespace Website
{
public static partial class Settings
{
public static int TopBottomMarginHeight => 225;
}
}