PanelBarComponent

Represents the Kendo UI PanelBar component for Angular. Displays hierarchical data as an expandable and collapsible accordion-style interface (see overview).

typescript

@Component({
  selector: 'my-app',
  template: `
    <kendo-panelbar [items]="items" expandMode="single">
    </kendo-panelbar>
  `
})
class AppComponent {
  items = [
    { title: 'Item 1', expanded: true, content: 'Content 1' },
    { title: 'Item 2', content: 'Content 2' }
  ];
}

Selector

kendo-panelbar

Export Name

Accessible in templates as #kendoPanelBarInstance="kendoPanelbar"

Inputs

Name	Type	Default	Description
animate	boolean	true	Sets the animate state of the PanelBar (see example).
expandMode	PanelBarExpandMode	'multiple	Sets the expand mode of the PanelBar through the PanelBarExpandMode enum (see example).
height	any	'400px'	Sets the height of the component when the "full" expand mode is used. This option is ignored when the "multiple" or "single" expand modes are used.
items	PanelBarItemModel[]		Sets the items of the PanelBar as an array of PanelBarItemModel instances (see example).
keepItemContent	boolean	false	When set to true, the PanelBar renders the content of all items and they are persisted in the DOM (see example).
selectable	boolean	true	Allows the PanelBar to modify the selected state of the items.

Events

Name	Type	Description
collapse	EventEmitter<PanelBarCollapseEvent>	Fires when an item is about to be collapsed. This event is preventable. If you cancel it, the item will remain expanded (see example).
expand	EventEmitter<PanelBarExpandEvent>	Fires when an item is about to be expanded. This event is preventable. If you cancel it, the item will remain collapsed (see example).
itemClick	EventEmitter<PanelBarItemClickEvent>	Fires when an item is clicked (see example).
select	EventEmitter<PanelBarSelectEvent>	Fires when an item is about to be selected. This event is preventable. If you cancel it, the item will not be selected (see example).
stateChange	EventEmitter<PanelBarStateChangeEvent>	Fires when the state of the PanelBar changes. This event is triggered when an item is selected, expanded, or collapsed. (see example). The event data contains a collection of all items that are modified.