[英]Dynamically change height of rows of Kendo Grid on container Kendo window resize
我有两个问题。 我在剑道窗口内的页面上有一个网格。 我需要增加/减少网格行的大小,以确保它填满窗口的整个高度。 我在另一个页面上也有一个网格,该页面仅位于Div内,需要调整其大小以适合其在文档窗口调整大小上的容器高度。
我有Kendo支持人员给我的以下代码,但是它不能满足我的需要。 它仅将网格设置为其容器的100%。 但这在行下方留下了空白。 我希望没有空格,并且行要动态更改其高度,以便它们全部适合其中一个,并在计算出多少行适合另一个窗口的大小后动态更改pageSize 。
其中一个网格是前十个网格,另一个是所有员工网格的列表。
$(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);
});
致歉的文本量很大,但是我已经坚持了好几天,想为您提供尽可能多的信息。
编辑:水平调整大小开箱即用。 为什么高度不一样? :S
EDIT2:这是我在网格中使用的代码,它位于kendo窗口的content部分中
@(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()
)
对于以下解决方案,您需要将表格包含在HTML元素内,该元素使用100%的面积(宽度和高度)。 为了得到它,我要做的就是将HTML定义为:
<div id="container">
<div id="grid"></div>
</div>
以及以下CSS样式:
#container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
不,一旦调整了窗口的大小,我们需要做一些数学运算...
$(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在这里显示它: http : //jsfiddle.net/OnaBai/dB5CF/
编辑 :如果您的网格在剑道窗口内,那么您必须:
$(window)
大小,而是kendoWindow的大小,因此我会将代码放入Kendo Window resize
事件处理程序中。 因此,您的代码应类似于:
$("#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");
修改后的JS小提琴在这里: http : //jsfiddle.net/OnaBai/dB5CF/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.