JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="tabstrip">
<ul>
<li class="k-state-active">First Tab</li>
<li>Splitter Tab</li>
</ul>
<div>foo</div>
<div>
<div id="splitter">
<div>left pane</div>
<div>right pane</div>
</div>
</div>
</div>
CSS
body {
font: 12px/1.5 Tahoma,sans-serif;
}
JavaScript
$("#tabstrip").kendoTabStrip({
animation: false,
select: function(e) {
setTimeout(function() {
$(e.contentElement).find(".k-splitter").each(function() {
$(this).data("kendoSplitter").trigger("resize");
alert($(this)+"hello");
});
});
}
});
$("#splitter").kendoSplitter();