如何在模式窗口中自動調整Kendo UI網格的大小

Question

我有3個模態窗口，每個窗口中都有Kendo UI網格，但是當數據較少時，它們在底部顯示空白。 有沒有一種方法可以自動調整網格的大小。 下面是jsfiddle示例：

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/

如果數據更多，則工作正常。

Answer 1

嘗試從Kendo窗口中刪除高度，因為當未明確提及高度時，它會自動適合內容。 或者我建議您不要硬編碼height的值，因為您的行數會不斷變化。相反，請根據行數計算高度，然后將計算出的高度發送給kendo窗口插入部分。 例如。 假設一行的高度為10，則5條記錄的高度為50。

Answer 2

關於網格配置，有兩個選項：

• 刪除網格高度，並允許小部件縮小和增長，具體取決於表行數
• 而不是為Grid使用height ，而是為Grid數據區域（ div.k-grid-content ）定義min-height和max-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

第二個選項更好，因為它將確保Grid尋呼機始終可見。

順便提一句，現在在Window的open事件中初始化了Grid。 如果多次關閉和打開窗口，將會產生問題。

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