[英]Kendo Splitter inside Kendo TabStrip with MVVM init
I have a page with a Kendo splitter inside a Kendo tabstrip and they are instantiated using the kendo.init method. 我在Kendo选项卡中有一个带有Kendo拆分器的页面,并且使用kendo.init方法实例化了它们。 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: 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: 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/ 这是上面代码的小提琴: 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. 您可以在此示例中看到,我试图实现一种在Web上找到的变通办法,以在tabstrip的select事件上触发拆分器的resize事件。 However, this has not worked.
但是,这没有用。
How can I resolve this issue? 我该如何解决这个问题?
Thanks for your time, 谢谢你的时间,
Regards, 问候,
Scott 斯科特
The approach to resizing has changed in the 2014 Q1 release; 调整大小的方法在2014年Q1版本中已更改; you should no longer call
widget.trigger("resize")
. 您不应再调用
widget.trigger("resize")
。 Instead, use kendo.resize()
; 而是使用
kendo.resize()
; also, you should bind to the activate
event so e.contentElement
is visible when your handler is called; 同样,您应该绑定到
activate
事件,以便在调用处理程序时可见e.contentElement
; that way you don't need the setTimeout
: 这样,您就不需要
setTimeout
:
$(document).ready(function () {
kendo.init($('#testContainer'));
var tabStrip = $('#testTabStrip').data("kendoTabStrip");
tabStrip.bind('activate', function (e) {
kendo.resize($(e.contentElement));
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.