Set Kendo grid height to match its container

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

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

Answer 2

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 3

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 4

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;
    }
}

Answer 5

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");     
}