设置 Kendo UI 网格高度 100% 的包装器 [英] Setting Kendo UI grid height 100% of wrapper

问题描述

我知道有一种简单的方法可以通过他们的 API 设置 Kendo UI 网格的固定高度，但对于我们的特定需求，我需要使网格在其包装器的整个高度上展开.

使用以下标记结构，我将 .wrapper 设置为 height:600px我试图给 .k-grid-content height:100% 但它没有扩展.#grid 使用 height:100% 扩展到 100% 但我也需要内部内容来扩展.我如何做到这一点?

这是演示 JS BIN

<div id="网格"><div class="k-grid-header"></div><div class="k-grid-content"></div><div class="k-grid-pager"></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"),其他元素高度 = 0;otherElements.each(function(){otherElementsHeight += $(this).outerHeight();});dataArea.height(gridHeight - otherElementsHeight);}

并且包装器的大小为(您可能需要修改它以适合您的布局):

function resizeWrapper() {$("#outerWrapper").height($('#body').innerHeight());}

文档准备好和窗口调整大小都调用:

$(window).resize(function() {resizeWrapper();调整网格()；});

相关css:

#grid {高度:100%；}#outerWrapper{溢出:隐藏；}

I know there is an easy way to set fixed height of a Kendo UI grid through their API but for our specific needs, I need to make the grid expand in full height of its wrapper.

With the following markup structure, I set .wrapper to height:600px and I tried to give .k-grid-content height:100% but it doesn't expand. #grid expands to 100% with height:100% but I need the inside contents to expand as well. How do I achieve that?

Here is the demo 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>

解决方案

According to one of Kendo's tech support team; Dimo Dimov. You should set the height of one container, and everything inside should be set to 100% (including the grid). Then you manually adjust the content height on document ready and window resize.

See here for his example:

http://jsfiddle.net/dimodi/SDFsz/

See here for yours updated with a js function to set the height of the wrapper to the window height.

http://jsbin.com/yumexugo/1/edit

Essentially the content is resized with:

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);
}

and the wrapper is sized with (you may need to modify this to suit your layout):

function resizeWrapper() {
    $("#outerWrapper").height($('#body').innerHeight());
}

Document ready and window resize both call:

$(window).resize(function() {
    resizeWrapper();
    resizeGrid();
});

Relevant css:

#grid {
  height: 100%;
}

#outerWrapper{
  overflow: hidden;
}

这篇关于设置 Kendo UI 网格高度 100% 的包装器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！