C# 如何更改 Kendo ui Grid 的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12955673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the height of Kendo ui Grid
提问by Goran303
How do I change the height of the Kendo Grid when using wrappers?
使用包装纸时如何更改 Kendo Grid 的高度？
采纳答案by Petur Subev
I assume the method you are looking for is under the Scrollable configuration (it is there because one Grid needs to be scrollable if you want it to have height)
我假设您正在寻找的方法在 Scrollable 配置下（它在那里是因为如果您希望它具有高度，则一个 Grid 需要可滚动）
.Scrollable(scr=>scr.Height(230))
回答by johlrich
HtmlAttributes()will let you add attributes to the <div>that holds the toolbars, paging, table, etc.
HtmlAttributes()将让您向<div>包含工具栏、分页、表格等的属性添加属性。
TableHtmlAttributes()will let you add attributes to just the <table>element
TableHtmlAttributes()会让你只为<table>元素添加属性
Exmaple setting table to 750px by adding a style attribute:
通过添加样式属性将表格设置为 750px 的示例：
@Html.Kendo().Grid(Model)
.Name("Grid")
.TableHtmlAttributes(new {style="height: 750px;"})
回答by Patrick M
You can also use external css rules for this, which can be preferable if your grid is re-used (as in a partial view). If you provide a style or height attribute, Kendo adds those in-line and thus they cannot be overriden by an external style sheet. Sometimes you want that, but sometimes you don't.
您也可以为此使用外部 css 规则，如果您的网格被重用（如在局部视图中），这可能更可取。如果您提供样式或高度属性，Kendo 会内联添加这些属性，因此它们不能被外部样式表覆盖。有时你想要那个，但有时你不想要。
Using the .Name()string provided to the wrapper, it's easy to write a css rule to target the header or the content.
使用.Name()提供给包装器的字符串，很容易编写一个 css 规则来定位标题或内容。
#GridName .k-grid-content {
height: 300px; /* internal bit with the scrollbar */
}
#GridName .k-grid-header-wrap tr {
height: 75px; /* header bar */
}
Note that the .k-grid-header-wrapclass may vary depending on how you initialize the grid. Also, you have to target the tror thtags inside the header. Styling the whole header (it's usually a div tag) leads to inconsistent results. Some browsers won't apply the rule, some browsers will leave a visible artifact where the borders of the actual tr/th begin.
请注意，.k-grid-header-wrap该类可能会因初始化网格的方式而异。此外，您必须在标题中定位tr或th标记。对整个标题（通常是 div 标签）进行样式设置会导致结果不一致。有些浏览器不会应用该规则，有些浏览器会在实际 tr/th 的边界开始处留下可见的工件。
Oh, and I should also say that this approach allows flexibility when changing between an MVC wrapper created grid and a regular js created grid. Or you can reuse the style sheet between different grids.
哦，我还应该说，这种方法允许在 MVC 包装器创建的网格和常规 js 创建的网格之间进行更改时具有灵活性。或者您可以在不同网格之间重复使用样式表。
回答by Muzammil Tamboli
To change height dynamically
动态改变高度
remove htmlattributes:
删除 html 属性：
.HtmlAttributes(new { style = "height:600px;" })
.HtmlAttributes(new { style = "height:600px;" })
Add scrollable with auto:
添加可滚动自动：
.Scrollable(a => a.Height("auto"))
.Scrollable(a => a.Height("auto"))
回答by Mahib
In strongly typed ones use for a rigid fixed height
在强类型中用于刚性固定高度
.Scrollable(scrollable => scrollable.Height(100))
In Js after dataSource declaration use
在js中dataSource声明后使用
$("#Grid").kendoGrid({
dataSource: { },
height: 450,
pageable: {
refresh: true,
pageSizes: true
},
columns:
[
***
]
});
You can also bind your grid for minimum and maximum heights for all the girds you have through css.
您还可以通过 css 为您拥有的所有网格绑定最小和最大高度的网格。
.k-grid .k-grid-content {
min-height: 100px;
max-height: 400px;
}
Or you can specify a specific grid, you replace the .k-grid with the specific grid id #YourGridName. Hope this helps.
或者你可以指定一个特定的网格，你用特定的网格 id 替换 .k-grid #YourGridName。希望这可以帮助。
