PanelBar

Description

The PanelBar widget displays hierarchical data in expandable sections.

Official Kendo UI PanelBar documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options

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());
  • Test 1
    • Test 1A
    • Test 1B
  • Test2
    • Test 2A
    • Test 2B

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());
Open 2
Enabled 2
Selected 2
  • Test 1
    • Test 1A
    • Test 1B
  • Test2
    • Test 2A
    • Test 2B

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());
  • Test 1
    • Test 1A
    • Test 1B
  • Test2
    • Test 2A
    • Test 2B

Live Options

The kendoPanelBar.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.
enabled

Determines if users can interact with the panel item

expanded

Indicates whether the panel bar item is expanded or closed

selected

Indicates whether the panel bar item is selected. Note: when selecting a different panel bar item, this will not be cleared, as there are no events raised for unselecting an item.

widget

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

Future Plans

Exploring tighter integration with templates and dataSource to allow Knockout data binding to work inside items along with support for selecting items.