如何改变Kendo ui Grid的高度

Question

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

Answer 1

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

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

Answer 2

动态改变高度

删除htmlattributes:

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

使用auto添加可滚动:

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

Answer 3

在强类型中,用于刚性固定高度

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

在使用dataSource声明后的Js中

$("#Grid").kendoGrid({

            dataSource: { },

            height: 450,

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

            columns:
                [
                   ***
                ]
        });

您还可以绑定网格,以获得通过css获得的所有网格的最小和最大高度.

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

或者,您可以指定特定网格,将.k网格替换为特定网格ID #YourGridName.希望这可以帮助.

Answer 4

HtmlAttributes()将允许您添加属性<div>,包含工具栏,分页,表等.

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

通过添加样式属性,将设置表格设置为750px:

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

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 创建的网格之间进行更改时具有灵活性。或者您可以在不同网格之间重复使用样式表。