• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Layout / API / PanelBarComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

PanelBarComponent

Represents the Kendo UI PanelBar component for Angular.

Selector

kendo-panelbar

Export Name

Accessible in templates as #kendoPanelBarInstance="kendoPanelbar"

Inputs

NameTypeDefaultDescription

animate

boolean

Sets the animate state of the PanelBar (see example).

expandMode

PanelBarExpandMode

Sets the expand mode of the PanelBar through the PanelBarExpandMode enum (see example).

The available modes are:

  • "single"—Expands only one item at a time. Expanding an item collapses the item that was previously expanded.
  • "multiple"—The default mode of the PanelBar.

Expands more than one item at a time. Items can also be toggled.

  • "full"—Expands only one item at a time.

The expanded area occupies the entire height of the PanelBar. Requires you to set the height property.

height

any

Sets the height of the component when the "full" expand mode is used. This option is ignored in the "multiple" and "single" expand modes.

items

PanelBarItemModel[]

Sets the items of the PanelBar as an array of PanelBarItemModel instances (see example).

keepItemContent

boolean

When set to true, the PanelBar renders the content of all items and they are persisted in the DOM (see example). By default, this option is set to false.

selectable

boolean

Allows the PanelBar to modify the selected state of the items.

Events

NameTypeDescription

collapse

EventEmitter<PanelBarCollapseEvent>

Fires when an item is about to be collapsed. (see example) This event is preventable. If you cancel it, the item will remain expanded.

expand

EventEmitter<PanelBarExpandEvent>

Fires when an item is about to be expanded. (see example) This event is preventable. If you cancel it, the item will remain collapsed.

itemClick

EventEmitter<PanelBarItemClickEvent>

Fires when the user clicks an item (see example).

select

EventEmitter<PanelBarSelectEvent>

Fires when an item is about to be selected. (see example) This event is preventable. If you cancel it, the item will not be selected.

stateChange

EventEmitter<PanelBarStateChangeEvent>

Fires each time the user interacts with a PanelBar item (see example). The event data contains a collection of all items that are modified.

In this article

Not finding the help you need?

Contact Support