如何改变Kendo ui Grid的高度

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

Answer 1

我假设你正在寻找的方法是在Scrollableconfiguration下（这是因为一个网格需要滚动，如果你想要它的高度）

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

Answer 2

dynamic改变高度

删除htmlattributes：

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

添加滚动与自动：

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

Answer 3

在强types的人使用一个刚性的固定高度

 .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; } 

或者，您可以指定一个特定的网格，用特定的网格ID #YourGridName -grid。 希望这可以帮助。

Answer 4

HtmlAttributes()可以让你添加属性到保存工具栏，分页，表等的<div> 。

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

通过添加一个样式属性来将表格设置为750px：

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

Answer 5

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

使用提供给包装器的.Name()string，很容易编写一个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包装器创build的网格和常规的js创build的网格之间进行切换时的灵活性。 或者你可以在不同的网格之间重复使用样式表。