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

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