Kendo Splitter In Tab

by lhoeppner

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'));
        var tabStrip = $('#testTabStrip').data("kendoTabStrip");

        tabStrip.bind('activate', function (e) {
            kendo.resize($(e.contentElement));
        });

    });