我知道有一个简单的方法可以通过他们的API来设置Kendo UI网格的固定高度,但是对于我们的具体需求,我需要让网格在包装的全高度上展开.
使用以下标记结构,我将.wrapper设置为height：600px
我试图给出.k网格内容高度：100％但不扩展.
#grid扩展为100％,高度：100％,但我需要内部内容来展开.我该如何实现？
这是演示JS BIN
<div class="wrapper">
<div id="grid">
<div class="k-grid-header"></div>
<div class="k-grid-content"></div>
<div class="k-grid-pager"></div>
</div>
</div>
解决方法
据Kendo的技术支持团队介绍;迪莫·迪莫夫您应该设置一个容器的高度,内部的所有内容应设置为100％(包括网格).然后手动调整文档准备就绪和窗口大小调整内容高度.
看到他的例子：
http://jsfiddle.net/dimodi/SDFsz/
看到这里更新了一个js函数,将包装器的高度设置为窗口高度.
http://jsbin.com/yumexugo/1/edit
基本上,内容大小如下：
function resizeGrid() {
var gridElement = $("#grid"),dataArea = gridElement.find(".k-grid-content"),gridHeight = gridElement.innerHeight(),otherElements = gridElement.children().not(".k-grid-content"),otherElementsHeight = 0;
otherElements.each(function(){
otherElementsHeight += $(this).outerHeight();
});
dataArea.height(gridHeight - otherElementsHeight);
}
并且包装尺寸与(您可能需要修改以适应您的布局)：
function resizeWrapper() {
$("#outerWrapper").height($('#body').innerHeight());
}
$(window).resize(function() {
resizeWrapper();
resizeGrid();
});
相关css：
#grid {
height: 100%;
}
#outerWrapper{
overflow: hidden;
}
