Kendo 内部网格 Kendo TabStrip 的高度不受限制

Question

我有一个放置在页面上的 Kendo 网格，它跨越整个可见页面（宽度和高度）。如果行数过多，网格显示滚动条。

但是当我将网格放在 Kendo TabStrip（高度为 100%）内时，网格的高度变得无限，滚动不显示并且页面外的行不可见（无法滚动到).

如何将网格限制为标签条的高度？

Answer 1

这个问题很难找到。这是 TabStrip 的问题，或者更确切地说是 TabStrip 与 Grid 的问题。

网格始终根据容器的大小调整其大小。 TabStrip 的 Tab 总是根据内容调整。

有3个步骤可以解决：

TabStrip 的选项卡必须将高度设置为 100%；
设置 TabStrip 的固定高度，这样网格就知道如何计算它的高度。在我的例子中，它必须在 DOMContentLoaded 事件中完成，在生成整个 html 之后但在加载网格之前；
请求网格在设置或更改父项的大小时调整大小；

示例页面代码：

<div id="header">
    Sample page header to show how to compute content's height
</div>
<div id="content">
   <div id="myTabStrip" data-role="tabstrip">
        <ul>
            <li id="Tab1" class="k-state-active">aaaa</li>
            <li id="Tab2">bbbbb</li>
        </ul>
        <div style="height: 100%">
            ...grid1 definition...
        </div>
        <div style="height: 100%">
            ...other stuff...
        </div>
    </div>
</div>

JavaScript代码：

 (function () {
    function resize() {
        var h = $("#content").height() - $("#header").height();
        $("#myTabStrip").height(h);
        $("#grid1").data('kendoGrid').resize();
    }

    $(document).one("DOMContentLoaded", resize);
    $(window).on("resize", resize);
})();

（上面的代码尚未准备好生产）。

Kendo 内部网格 Kendo TabStrip 的高度不受限制

Kendo Grid inside Kendo TabStrip has unlimited height

html

javascript

kendo-ui

kendo-grid

kendo-tabstrip