带MVVM init的Kendo TabStrip内部剑道分离器
带MVVM init的Kendo TabStrip内部剑道分离器
提问于 2014-04-23 09:22:53
我在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上找到的解决方案，以在选项卡的select事件上触发拆分器的调整大小事件。然而，这种做法并没有奏效。
我怎样才能解决这个问题？
耽误您时间，实在对不起,
致以敬意，
史考特
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-04-23 11:11:29
在2014年的Q1版本中，调整大小的方法已经改变；您不应该再调用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));
});
});(更新的演示)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23240058
复制相关文章
相似问题
腾讯云开发者
