This example demonstrates initializing a Splitter widget with no additional options specified.

<div data-bind="kendoSplitter: {}">
    <div>Pane One</div>
    <div>Pane Two</div>
</div>

var ViewModel = function() {};

                            ko.applyBindings(new ViewModel());

This example demonstrates passing additional options in the data-bind attribute. The kendoSplitterPane binding can be applied to child elements to control the behavior of individual menu items.

<input data-bind="checked: isOpen" type="checkbox" /> Open<br/>
<input class="span1" data-bind="value: minSize" /> Min 1<br/>
<input class="span1" data-bind="value: maxSize" /> Max 1<br/>
<input class="span1" data-bind="value: size" /> Size 1
<hr/>
<div data-bind="kendoSplitter: {}">
    <div data-bind="kendoSplitterPane: { expanded: isOpen, max: maxSize, min: minSize, size: size }">one</div>
    <div>two</div>
</div>

var ViewModel = function() {
    this.isOpen = ko.observable(true);
    this.maxSize = ko.observable("200px");
    this.minSize = ko.observable("50px");
    this.size = ko.observable("100px");
};

                            ko.applyBindings(new ViewModel());

This example demonstrates setting global options in ko.bindingHandlers.kendoSplitter.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<div data-bind="kendoSplitter: {}">
    <div>Pane One</div>
    <div>Pane Two</div>
</div>

var ViewModel = function() {};

ko.bindingHandlers.kendoSplitter.options.orientation = "vertical";

                            ko.applyBindings(new ViewModel());