[英]Kendo Grid inside Kendo TabStrip has unlimited height
I have a Kendo Grid that is placed on a page and it spans on the whole visible page (width and height). 我有一个Kendo Grid,它位于页面上,并且跨越整个可见页面(宽度和高度)。 If there's too many rows, grid shows a scroll bar.
如果行太多,网格将显示滚动条。
But when I place the grid inside a Kendo TabStrip (with height 100%), the grid's height becomes unlimited, the scroll is not shown and rows outside the page are not visible (cannot be scrolled to). 但是,当我将网格放置在Kendo TabStrip(高度为100%)中时,网格的高度变得不受限制,滚动不会显示,并且页面外的行也不可见(无法滚动到)。
How to limit the grid to tabstrip's height? 如何将网格限制到标签的高度?
The problem was tricky to find. 这个问题很难发现。 It is a problem with TabStrip or rather TabStrip vs Grid problem.
这是TabStrip的问题,或者是TabStrip与网格的问题。
Grid always adjusts its size to the container's size. 网格始终将其大小调整为容器的大小。 TabStrip's Tab always adjusts to the content.
TabStrip的选项卡始终调整为内容。
There are 3 steps to solve it: 有3个步骤可解决此问题:
Sample page code: 示例页面代码:
<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 code: 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);
})();
(The code above is not production ready). (上面的代码尚未投入生产)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.