Splitter

Description

The Splitter widget allows for resizable panels that can be collapsed.

Official Kendo UI Splitter documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options

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());
Pane One
Pane Two

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());
Open
Min 1
Max 1
Size 1
one
two

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());
Pane One
Pane Two

Live Options

The kendoSplitter.md binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
expanded

Controls whether the pane is expanded or collapsed

size

The current size of the pane

max

The maximum size of the pane

min

The minimum size of the pane

widget

If specified, will populate an observable with a reference to the actual widget