Kendo Splitter inside Kendo TabStrip with MVVM init

Question

I have a page with a Kendo splitter inside a Kendo tabstrip and they are instantiated using the kendo.init method. There are two tabs and the splitter control is in the second tab. When I click on the second tab, the splitter control has not been initialised correctly. The splitter's divider is not the correct height.

I have put together a sample page that demonstrates this behaviour:

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

Here is a fiddle of the above code: http://jsfiddle.net/codeowl/2nq5z/3/

You can see in this example that I have tried to implement a workaround I found on the Web to trigger the resize event of the splitter on the select event of the tabstrip. However, this has not worked.

How can I resolve this issue?

Thanks for your time,

Regards,

Scott

Answer 1

The approach to resizing has changed in the 2014 Q1 release; you should no longer call widget.trigger("resize"). Instead, use kendo.resize(); also, you should bind to the activate event so e.contentElement is visible when your handler is called; that way you don't need the setTimeout:

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

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

(updated demo)