1

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

4

1 回答 1

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

（更新演示）

于 2014-04-23T11:11:29.903 回答