Kendo Splitter внутри Kendo TabStrip с инициализацией MVVM

Question

У меня есть страница с разделителем Kendo внутри вкладки Kendo, и они создаются с помощью метода kendo.init. Есть две вкладки, и управление сплиттером находится на второй вкладке. Когда я нажимаю на вторую вкладку, элемент управления разделителем не был правильно инициализирован. Разделитель разделителя имеет неверную высоту.

Я собрал образец страницы, которая демонстрирует это поведение:

HTML:

<div id="testContainer">
    <div 
        id="testTabStrip"
        data-role="tabstrip">
        <ul>
            <li class="k-state-active">Tab1</li>
            <li>Tab2</li>
        </ul>
        <div>
            <div id="tab1-content">
                Tab One Content
            </div>
        </div>
        <div>
            <div id="tab2-content">
                <div data-role="splitter"
                    data-panes="[
                        { collapsible: true, size: '300px' },
                        { collapsible: true }
                    ]" 
                    style="min-height:700px">
                    <div id="Left-Pane">
                        Left Pane Content
                    </div>
                    <div id="Right-Pane">
                        Right Pane Content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript:

$(document).ready(function() {
    kendo.init($('#testContainer'));
    $('#testTabStrip').bind('select', function (e) {
        setTimeout(function () {
            $(e.contentElement).find(".k-splitter").each(function () {
                $(this).data("kendoSplitter").trigger("resize");
            },300);
        });
    });
});

Вот скрипка приведенного выше кода: http://jsfiddle.net/codeowl/2nq5z/3/

В этом примере вы можете видеть, что я попытался реализовать обходной путь, который я нашел в Интернете, чтобы вызвать событие изменения размера разделителя для события select на вкладке. Однако это не сработало.

Как я могу решить эту проблему?

Спасибо за ваше время,

С Уважением,

Скотт

Answer 1

Подход к изменению размера изменился в первом квартале 2014 года; ты больше не должен звонить widget.trigger("resize"), Вместо этого используйте kendo.resize(); Кроме того, вы должны привязать к activate событие так e.contentElement виден, когда вызывается ваш обработчик; таким образом, вам не нужно setTimeout:

$(document).ready(function () {
    kendo.init($('#testContainer'));
    var tabStrip = $('#testTabStrip').data("kendoTabStrip");

    tabStrip.bind('activate', function (e) {
        kendo.resize($(e.contentElement));
    });
});

(обновленная демоверсия)