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/

您可以在此示例中看到，我已尝试实现我在Web上找到的解决方法，以在tabstrip的select事件上触发拆分器的resize事件。但是，这没效果。

如何解决此问题？

感谢您的时间，

问候，

斯科特

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

（已更新demo）

使用MVVM init在Kendo TabStrip中使用Kendo Splitter

1 个答案: