如何更改Kendo UI Grid的高度

Question

在使用包装器时，如何更改Kendo网格的高度？

- Goran303

Answer 1

我假设你想要的方法在可滚动配置下（因为如果你想让一个网格具有高度，就需要有一个可滚动的选项）。

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

- Petur Subev

Answer 2

动态更改高度:

移除html属性:

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

添加自动滚动:

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

- Muzammil Tamboli

---

这个效果很好，但是我需要一个底部高度为20像素的页脚。我该怎么做？ - pfeds

Answer 3

在强类型语言中，通常用于固定高度的刚性布局。

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

在 JavaScript 中，在数据源声明后使用：

$("#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。希望这可以帮助您。

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

- Mahib

Answer 4

HtmlAttributes()函数可以让您向包含工具栏、分页、表格等内容的<div>元素添加属性。

TableHtmlAttributes()函数可以让您向<table>元素添加属性。

例如，通过添加style属性将表格设置为750像素：

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

- johlrich

Answer 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创建的网格之间进行灵活切换。或者您可以在不同的网格之间重用样式表。

- Patrick M