Splitters

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.blueopal.min.css">
<script src="http://www.hankinsoft.com/kendo.web.min.js"></script>
<div id="horizontal">

                        <div>

                        </div>

                        <div>
    <div id="overviewSplitter">

        <div id="overviewTree">

            <div id="treeView"></div>

        </div>

        <div id="overviewDetails">

            <div id="overviewGrid">
                sometextgoeshere
            </div>

        </div>

    </div>
    </div>
</div>

JavaScript

$("#overviewSplitter").kendoSplitter({

            panes: [

                { collapsible: false },

                { collapsible: true, size: "300px", min: "150px", max: "400px;" },

            ]

        });
// Setup the horizontalSplitter

                $("#horizontal").kendoSplitter(

                {

                    panes: [

                        { collapsible: true, size: "220px", min: "150px", max: "300px" },

                        { collapsible: false },

                    ]

                });