Toggle Events with Kendo UI Web Splitter Widgets

A simple test of toggle events with the Splitter widget of Kendo UI Web.

by jbristowe

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/examples/shared/styles/examples.min.css">
<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>
<script src="http://cdn.kendostatic.com/2011.3.1129/examples/shared/js/kendo.examples.min.js"></script>
<div id="splitter">
    <div id="pane1">Pane #1</div>
    <div id="pane2">Pane #2</div>
</div>
<button id="toggleButton" type="button">Toggle Pane #1</button>
<div class="console"></div>

JavaScript

$('#toggleButton').click(function() {
    var splitter = $("#splitter").data("kendoSplitter");
    splitter.toggle("#pane1", false);
});

// event handler for collapse
var onCollapse = function(e) {
    kendoConsole.log("collapse");
};

// event handler for expand
var onExpand = function(e) {
    kendoConsole.log("expand");
};

// event handler for resize
var onResize = function(e) {
    kendoConsole.log("resize");
};

// event handler for layoutChange
var onLayoutChange = function(e) {
    kendoConsole.log("layoutChange")
};

var splitter = $("#splitter").kendoSplitter({
    panes: [
        { collapsible: true, resizable: true, size: "100px" },
        { collapsible: true, resizable: true, size: "200px" }
    ],
    expand: onExpand,
    collapse: onCollapse,
    layoutChange: onLayoutChange,
    resize: onResize
});