javascript 在容器 Kendo 窗口调整大小时动态更改 Kendo Grid 行的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18337693/
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
Dynamically change height of rows of Kendo Grid on container Kendo window resize
提问by user2248441
I have two issues. I have a grid on a page which is contained within a Kendo window. I need the size of the grid rows to increase/decrease to ensure it fills the whole height of the window. I also have a grid on a different page which is just inside a Div that needs to be resized to fit the height of its container on the document window resize.
我有两个问题。我在一个包含在 Kendo 窗口中的页面上有一个网格。我需要增加/减少网格行的大小以确保它填满窗口的整个高度。我还在另一个页面上有一个网格，它位于一个 Div 内，需要调整大小以适应其在文档窗口调整大小的容器的高度。
I have the following code given to me by Kendo support, but it doesn't do what I need it to do. It only sets the grid to be 100% of its container. But this leaves white space underneath the rows. I want to have no white space and for the rows to dynamically change their height so they all fit within the space together for one of them, and dynamically change the pageSize after calculating how many rows would fit in the size of the window for the other.
我有 Kendo 支持给我的以下代码，但它没有做我需要它做的事情。它仅将网格设置为其容器的 100%。但这会在行下方留下空白。我希望没有空白，并且行要动态更改它们的高度，以便它们都适合其中一个的空间，并在计算出适合另一个窗口大小的行数后动态更改 pageSize .
One of the grids is a top ten grid and the other is a list of all employees grid.
其中一个网格是前十名网格，另一个是所有员工列表的网格。
$(window).resize(function() {
var gridElement = $("#grid"),
newHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function(){
otherElementsHeight += $(this).outerHeight();
});
gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
});
Apologies for the amount of text but I've been stuck on this for days and wanted to give you as much info as possible.
对文字数量表示歉意，但我已经坚持了几天，并希望为您提供尽可能多的信息。
EDIT: horizontal resizing works as intended out of the box. Why is the height any different? :S
编辑：水平调整大小按预期开箱即用。为什么高度不一样？:S
EDIT2: Here is the code im using for my grid, this resides in the kendo window's content section
EDIT2：这是我用于网格的代码，它位于剑道窗口的内容部分
@(Html.Kendo().Grid<DataModels.UI.OperatorPickRatesChartModel>()
.Name("topTenPickersChart")
.Columns(columns =>
{
columns.Bound(b => b.operatorId).Title("Operator Id");
columns.Bound(b => b.averagePicksLastThirty).Title(" Average Picks Last Thirty");
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Field(b => b.operatorId).Editable(false);
model.Field(b => b.averagePicksLastThirty).Editable(false);
})
.Read("operatorTopTenPickRates", "DashBoard")
.Events(events => events.Error("error"))
.PageSize(10)
)
.Filterable()
)
)
回答by OnaBai
For the following solution you need to have the table inside an HTML element that uses 100% of the area (width and height). For getting it what I do is define the HTML as:
对于以下解决方案，您需要将表格放在使用 100% 区域（宽度和高度）的 HTML 元素中。为了得到它，我所做的是将 HTML 定义为：
<div id="container">
<div id="grid"></div>
</div>
and the following CSS style:
以及以下 CSS 样式：
#container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Not, once the window is resized we need to do some maths...
不，一旦窗口被调整大小，我们需要做一些数学......
$(window).resize(function () {
// Get container height
var containerH = $("#container").height();
// Get Grid height
var tableH = grid.element.height();
// Get Grid body height (the remaining is header and footer)
var bodyH = grid.table.height();
// The new height of the body is:
grid.table.height(containerH - tableH + bodyH - 1);
});
JSFiddle showing it here: http://jsfiddle.net/OnaBai/dB5CF/
JSFiddle 在这里展示：http: //jsfiddle.net/OnaBai/dB5CF/
EDIT: If your grid is inside a kendo window, then you have to:
编辑：如果您的网格在剑道窗口内，那么您必须：
- You don't need the CSS definition.
- You are not resizing
$(window)but kendoWindow so I will put that code inside Kendo Windowresizeevent handler. - You need to set an initial width for Kendo Window.
- 您不需要 CSS 定义。
- 您不是在调整大小，
$(window)而是在 kendoWindow，所以我会将这些代码放在 Kendo Windowresize事件处理程序中。 - 您需要为 Kendo Window 设置初始宽度。
So your code should be something like:
所以你的代码应该是这样的：
$("#container").kendoWindow({
width : 400,
resize: function (e) {
console.log("resize", e);
var containerH = $("#container").height();
var tableH = grid.element.height();
var bodyH = grid.table.height();
grid.table.height(containerH - tableH + bodyH - 1);
}
});
var grid = $("#grid").kendoGrid({
dataSource: {
data : createRandomData(100),
pageSize: 10,
schema : {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
},
editable : false,
pageable : true,
columns : [
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 90, title: "Last Name" },
{ field: "City", width: 100 }
]
}).data("kendoGrid");
And the modified JS Fiddle here: http://jsfiddle.net/OnaBai/dB5CF/2/
修改后的 JS Fiddle 在这里：http: //jsfiddle.net/OnaBai/dB5CF/2/
