如何更改 Kendo ui Grid 的高度答案

【问题标题】：How to change the height of Kendo ui Grid如何更改 Kendo ui Grid 的高度
【发布时间】：2012-10-08 23:19:00
【问题描述】：

使用包装器时如何更改 Kendo Grid 的高度？

【问题讨论】：

【解决方案1】：

我假设您正在寻找的方法是在 Scrollable 配置下（它存在是因为如果您希望一个 Grid 具有高度，则它需要是可滚动的）

.Scrollable(scr=>scr.Height(230))

【讨论】：

【解决方案2】：

动态改变高度

删除 html 属性：

.HtmlAttributes(new { style = "height:600px;" })

使用自动添加可滚动：

.Scrollable(a => a.Height("auto"))

【讨论】：

这很好用，但我需要在底部有一个 20 像素的页脚。我该怎么做？

【解决方案3】：

在强类型中用于固定高度

.Scrollable(scrollable => scrollable.Height(100))

在Js中dataSource声明后使用

$("#Grid").kendoGrid({

            dataSource: { },

            height: 450,

            pageable: {
                refresh: true,
                pageSizes: true
            },

            columns:
                [
                   ***
                ]
        });

您还可以通过 css 为您拥有的所有网格绑定网格的最小和最大高度。

.k-grid .k-grid-content {
 min-height: 100px;
 max-height: 400px;
}

或者您可以指定一个特定的网格，将 .k-grid 替换为特定的网格 ID #YourGridName。希望这会有所帮助。

【讨论】：

【解决方案4】：

HtmlAttributes() 将允许您向包含工具栏、分页、表格等的<div> 添加属性。

TableHtmlAttributes() 将允许您将属性添加到 <table> 元素

通过添加样式属性将表格设置为750px的示例：

  @Html.Kendo().Grid(Model)
               .Name("Grid")
               .TableHtmlAttributes(new {style="height: 750px;"})

【讨论】：

【解决方案5】：

您也可以为此使用外部 css 规则，如果您的网格被重复使用（如在局部视图中），这可能会更好。如果您提供样式或高度属性，Kendo 会内联添加这些属性，因此它们不能被外部样式表覆盖。有时你想要，但有时你不想要。

使用提供给包装器的.Name() 字符串，很容易编写一个css 规则来定位标题或内容。

#GridName .k-grid-content {
    height: 300px; /* internal bit with the scrollbar */
}

#GridName .k-grid-header-wrap tr {
    height: 75px; /* header bar */
}

请注意，.k-grid-header-wrap 类可能会因您初始化网格的方式而异。此外，您必须针对标头内的tr 或th 标记。对整个标题（通常是 div 标签）进行样式设置会导致结果不一致。某些浏览器不会应用该规则，某些浏览器会在实际 tr/th 的边界开始处留下可见的工件。

哦，我还应该说，当在 MVC 包装器创建的网格和常规的 js 创建的网格之间进行切换时，这种方法允许灵活性。或者您可以在不同的网格之间重用样式表。

【讨论】：