如何在模态窗口中自动调整 Kendo UI 网格的大小答案

【问题标题】：How to automatically resize Kendo UI grid in a modal window如何在模态窗口中自动调整 Kendo UI 网格的大小
【发布时间】：2017-01-06 22:28:42
【问题描述】：

我有 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/

如果数据更多，那么它工作正常。

【问题讨论】：

标签： javascript jquery css asp.net-mvc kendo-ui

【解决方案1】：

尝试从 Kendo 窗口中删除高度，因为当没有明确提及高度时，它会自动适应内容。要么我建议您不要硬编码高度的值，因为您的行数不断变化。而是根据行数计算高度，然后将计算出的高度发送到剑道窗口 intilization 部分。例如。假设单行需要 10 个高度，那么对于 5 条记录，您发送的高度应该是 50。

【讨论】：

【解决方案2】：

关于网格配置有两个选项：

移除 Grid 高度并允许小部件缩小和增长，具体取决于表格行数
不要为网格使用height，而是为网格数据区域(div.k-grid-content) 定义min-height 和max-height 样式，以允许小部件在特定限制内调整大小。在这种情况下，您还可以移除 Window 高度。

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 寻呼机始终可见。

附带说明，Grid 现在在 Window 的 open 事件中初始化。如果窗口多次关闭和打开，这将产生问题。

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

【讨论】：