Kendo Grid inside Kendo TabStrip has unlimited height

Question

I have a Kendo Grid that is placed on a page and it spans on the whole visible page (width and height). 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).

How to limit the grid to tabstrip's height?

Answer 1

The problem was tricky to find. It is a problem with TabStrip or rather TabStrip vs Grid problem.

Grid always adjusts its size to the container's size. TabStrip's Tab always adjusts to the content.

There are 3 steps to solve it:

• TabStrip's Tabs must have height set to 100%;
• Set fixed height of the TabStrip, so the grid knows how to compute its height. In my case it must be done in DOMContentLoaded event, after whole html is generated but before grid is loaded;
• Request the grid to resize when parent's size is set or changed;

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:

 (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).