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

问题描述

我知道有一种简单的方法可以通过API设置Kendo UI网格的固定高度，但是为了满足我们的特定需求，我需要让网格在其包装器的整个高度上展开。

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.

使用以下标记结构，我将 .wrapper 设置为 height：600px
我试图给 .k-grid-content height：100％但它不会扩展。
#grid 使用 height：100％扩展为100％但我需要将内部内容扩展为好。我如何实现这一目标？

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?

以下是演示 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>

推荐答案

根据剑道的技术支持团队之一;迪莫迪莫夫。您应该设置一个容器的高度，内部的所有内容都应设置为100％（包括网格）。然后手动调整文档就绪和窗口大小调整的内容高度。

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.

请参阅此处的示例：

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

在这里看到你的更新，用js函数将包装器的高度设置为窗口高度。

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

并且包装大小适合（您可能需要修改它以适合您的layout）：

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

相关的css：

#grid {
  height: 100%;
}

#outerWrapper{
  overflow: hidden;
}

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