Kendo Splitter In Tab

by codeowl

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
    <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);
            });
        });
    });