How to automatically resize Kendo UI grid in a modal window

Question

I have 3 modal windows and each of them are having Kendo UI grids in them but when the data is less they show a white space at the bottom. Is there a way to automatically resize the grid. Below is the jsfiddle example:

var myWindow = $('#myWindow').kendoWindow({
title: "My Window",
width: 500,
height: 400,
open: function() {
    $('#grid').kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            pageSize: 3
        },
        height: 350,
        columns: [
            { field:"OrderID", width: 100 },
            { field: "Freight", width: 100 }
        ]
    });
}
});
http://jsfiddle.net/piyushpj/dj3rwx4h/18/

If data is more then it works fine.

Answer 1

Try removing the height from the Kendo Window since it automatically fits to content when the height is not explicitly mentioned. OR I would suggest you to not hardcode the value of height as your no of rows keeps varying.Instead calculate the height based up upon of number of rows and then send the calculated height to the kendo window intilization part. For eg. Assume that it take 10 height for a single row then for 5 records ur height sent should be 50.

Answer 2

There are two options with regard to the Grid configuration:

• remove the Grid height and allow the widget to shrink and grow, depending on the number of table rows
• instead of using height for the Grid, define min-height and max-height styles for the Grid data area ( div.k-grid-content ) to allow the widget to resize within certain limits. In this case you can also remove the Window height.

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#height

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#let-the-height-vary-within-limits

The second option is better, because it will ensure that the Grid pager is always visible.

On a side note, the Grid is now initialized in the Window's open event. This will create problems if the Window is closed and opened multiple times.

http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization