Kendo UI

jQuery + Kendo UI + MockJax

by chanaka1

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<div id="example" class="k-content">
            <div id="vertical">
                <div>
                    <p>
                        Outer splitter : top pane (resizable and collapsible)
                    </p>
                </div>
                <div id="middlePane">
                    <div id="horizontal" style="height: 100%">
                        <div>
                            <p>
                                Inner splitter :: left pane
                            </p>
                        </div>
                        <div>
                            <p>
                                Inner splitter :: center pane
                            </p>
                        </div>
                        <div>
                            <p>
                                Inner splitter :: right pane
                            </p>
                        </div>
                    </div>
                </div>
                <div>
                    <p>
                        Outer splitter : bottom pane (non-resizable, non-collapsible)
                    </p>
                </div>
            </div>

JavaScript

$("#vertical").kendoSplitter({
    orientation: "vertical",
        panes: [
            { collapsible: false, resizable: false, size: "100px" },
            { collapsible: false },
            { collapsible: false, resizable: false, size: "100px" }
        ]
    });

$("#horizontal").kendoSplitter({
    panes: [
        { collapsible: true },
        { collapsible: false },
        { collapsible: true }
    ]
});

$(window).resize(function() {
    resizeSplitter()
});

resizeSplitter = function() {
    splitter = $("#vertical")
        .data("kendoSplitter")
        .size("#middlePane", $(window).height() - 200 + "px")
        .trigger("resize")
};

resizeSplitter();