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

<ul data-bind="kendoPanelBar: {}">
    <li>
        <span>Test 1</span>
        <ul>
            <li>Test 1A</li>
            <li>Test 1B</li>
        </ul>
    </li>
    <li>
        <span>Test2</span>
        <ul>
            <li>Test 2A</li>
            <li>Test 2B</li>
        </ul>
    </li>
</ul>

var ViewModel = function() {};

                            ko.applyBindings(new ViewModel());

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

<input data-bind="checked: isTwoOpen" type="checkbox" /> Open 2<br/>
<input data-bind="checked: twoEnabled" type="checkbox" /> Enabled 2<br/>
<input data-bind="checked: twoSelected" type="checkbox" /> Selected 2
<hr/>
<ul data-bind="kendoPanelBar: {}">
    <li>
        <span>Test 1</span>
        <ul>
            <li>Test 1A</li>
            <li>Test 1B</li>
        </ul>
    </li>
    <li data-bind="kendoPanelItem: { expanded: isTwoOpen, enabled: twoEnabled, selected: twoSelected }">
        <span>Test2</span>
        <ul>
            <li>Test 2A</li>
            <li>Test 2B</li>
        </ul>
    </li>
</ul>

var ViewModel = function() {
    this.twoEnabled = ko.observable(true);
    this.twoSelected = ko.observable().extend({ notify: "always" });
    this.isTwoOpen = ko.observable(false);
};

                            ko.applyBindings(new ViewModel());

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

<ul data-bind="kendoPanelBar: {}">
    <li>
        <span>Test 1</span>
        <ul>
            <li>Test 1A</li>
            <li>Test 1B</li>
        </ul>
    </li>
    <li>
        <span>Test2</span>
        <ul>
            <li>Test 2A</li>
            <li>Test 2B</li>
        </ul>
    </li>
</ul>

var ViewModel = function() {};

ko.bindingHandlers.kendoPanelBar.options.expandMode = "single";

                            ko.applyBindings(new ViewModel());