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窗口移除高度，因为当未明确提及高度时，它会自动适合内容。要么我建议你不要硬编码高度的值，因为你的行数不变。相反根据行数计算高度，然后将计算出的高度发送到剑道窗口的使用部分。例如。假设一行需要10个高度，那么对于5个记录，你发送的高度应为50。

Answer 2

网格配置有两个选项：

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

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事件中初始化。如果Window关闭并多次打开，这将产生问题。

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

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

2 个答案: