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

Solution 1

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

Solution 2

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

});

Solution 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.

Comments

[chiapa]

I tried .HtmlAttributes(new { style = "height:100%;" }) but it didn't work. I don't want to set the height in pixels, it will probably bring me problems later on

[David Shorthose]

Ok. Let me have a play with my project and I will post an update if I come up with a solution for you.

[David Shorthose]

updated answer with my solution. obviously change the #baseGrid to the #datagrid_Concessoes

[David Shorthose]

obviously you could change the height manipulation to look at the height of the containing div eg $(".main-window").height() and then apply the same percentage markdown.