Kendo Grid внутри Kendo TabStrip имеет неограниченную высоту

Question

У меня есть Kendo Grid, который размещен на странице и охватывает всю видимую страницу (ширину и высоту). Если строк слишком много, сетка показывает полосу прокрутки.

Но когда я помещаю сетку в Kendo TabStrip (с высотой 100%), высота сетки становится неограниченной, прокрутка не отображается, а строки за пределами страницы не видны (не могут быть прокручены).

Как ограничить сетку высотой вкладки?

Answer 1

Проблему было сложно найти. Это проблема с TabStrip или, скорее, проблема TabStrip против Grid.

Сетка всегда корректирует свой размер в соответствии с размером контейнера. TabStrip's 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);
})();

(Код выше не готов к производству).