剑道塔布内的剑道格子有无限的高度

Kendo Grid inside Kendo TabStrip has unlimited height

本文关键字：无限 高度 道塔 布内      更新时间：2023-09-26

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

但是，当我将网格放置在剑道TabStrip（高度为100%）内时，网格的高度将变得不受限制，滚动不会显示，页面外的行也不可见（无法滚动到）。

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

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

网格总是根据容器的大小调整其大小。TabStrip的选项卡总是根据内容进行调整。

有三个步骤来解决它：

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

（上面的代码还没有准备好生产）。

相关文章：