如何改变Kendo ui Grid的高度

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

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

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

dynamic改变高度

删除htmlattributes:

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

添加滚动与自动:

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

在强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。 希望这可以帮助。

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

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

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

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

你也可以使用外部的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类可能会根据您如何初始化网格而有所不同。 此外,你必须定位标题内的trth标签。 造型整个标题(通常是一个div标签)会导致不一致的结果。 有些浏览器不会应用这个规则,有些浏览器会在实际tr / th的边界开始的地方留下可见的伪像。

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