Dynamically change height of rows of Kendo Grid on container Kendo window resize

Question

I have two issues. I have a grid on a page which is contained within a Kendo window. I need the size of the grid rows to increase/decrease to ensure it fills the whole height of the window. I also have a grid on a different page which is just inside a Div that needs to be resized to fit the height of its container on the document window resize.

I have the following code given to me by Kendo support, but it doesn't do what I need it to do. It only sets the grid to be 100% of its container. But this leaves white space underneath the rows. I want to have no white space and for the rows to dynamically change their height so they all fit within the space together for one of them, and dynamically change the pageSize after calculating how many rows would fit in the size of the window for the other.

One of the grids is a top ten grid and the other is a list of all employees grid.

    $(window).resize(function() {
        var gridElement = $("#grid"),
            newHeight = gridElement.innerHeight(),
            otherElements = gridElement.children().not(".k-grid-content"),
            otherElementsHeight = 0;

        otherElements.each(function(){
            otherElementsHeight += $(this).outerHeight();
        });

        gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
    });

Apologies for the amount of text but I've been stuck on this for days and wanted to give you as much info as possible.

EDIT: horizontal resizing works as intended out of the box. Why is the height any different? :S

EDIT2: Here is the code im using for my grid, this resides in the kendo window's content section

@(Html.Kendo().Grid<DataModels.UI.OperatorPickRatesChartModel>()
                    .Name("topTenPickersChart")
                    .Columns(columns =>
                    {
                        columns.Bound(b => b.operatorId).Title("Operator Id"); 
                        columns.Bound(b => b.averagePicksLastThirty).Title(" Average Picks Last Thirty");
                    })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model => 
                            {
                                model.Field(b => b.operatorId).Editable(false);
                                model.Field(b => b.averagePicksLastThirty).Editable(false);
                            })
                            .Read("operatorTopTenPickRates", "DashBoard")           
                        .Events(events => events.Error("error"))
                        .PageSize(10)                           
                    )
                    .Filterable()

)

OnaBai OnaBai · Accepted Answer · 2013-08-20T17:26:48

For the following solution you need to have the table inside an HTML element that uses 100% of the area (width and height). For getting it what I do is define the HTML as:

<div id="container">
    <div id="grid"></div>
</div>

and the following CSS style:

#container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Not, once the window is resized we need to do some maths...

$(window).resize(function () {
    // Get container height
    var containerH = $("#container").height();
    // Get Grid height
    var tableH = grid.element.height();
    // Get Grid body height (the remaining is header and footer)
    var bodyH = grid.table.height();
    // The new height of the body is:
    grid.table.height(containerH - tableH + bodyH - 1);
});

JSFiddle showing it here: http://jsfiddle.net/OnaBai/dB5CF/

EDIT: If your grid is inside a kendo window, then you have to:

You don't need the CSS definition.
You are not resizing $(window) but kendoWindow so I will put that code inside Kendo Window resize event handler.
You need to set an initial width for Kendo Window.

So your code should be something like:

$("#container").kendoWindow({
    width : 400,
    resize: function (e) {
        console.log("resize", e);
        var containerH = $("#container").height();
        var tableH = grid.element.height();
        var bodyH = grid.table.height();
        grid.table.height(containerH - tableH + bodyH - 1);
    }
});

var grid = $("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(100),
        pageSize: 10,
        schema  : {
            model: {
                fields: {
                    Id       : { type: 'number' },
                    FirstName: { type: 'string' },
                    LastName : { type: 'string' },
                    City     : { type: 'string' }
                }
            }
        }
    },
    editable  : false,
    pageable  : true,
    columns   : [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 90, title: "Last Name" },
        { field: "City", width: 100 }
    ]
}).data("kendoGrid");

And the modified JS Fiddle here: http://jsfiddle.net/OnaBai/dB5CF/2/

Dynamically change height of rows of Kendo Grid on container Kendo window resize

1 Answers