New to Kendo UI for Vue? Start a free 30-day trial

PanelBar

Directive

kendo-panelbar

Child Components

Props

animation Boolean | Object

A collection of visual animations for the PanelBar items which are expanded or collapsed by the user (animation in Kendo UI for jQuery). If animation is set to false, all animations of the PanelBar will be disabled. The supported composite props are available in AnimationProps.

auto-bind Boolean

If auto-bind is set to false, the PanelBar will not bind to the data source during initialization (autoBind in Kendo UI for jQuery). In this case data binding will occur when the change event of the data source fires. By default, the PanelBar will bind to the data source that is specified in the configuration.

content-urls Array

An array with the URLs from which the content of the PanelBar items will be loaded (contentUrls in Kendo UI for jQuery). To load only specific items with Ajax, set the URLs to the corresponding positions in the array and the other elements to null.

data-image-url-field String

The field of the data item that provides the image URL of the PanelBar nodes (dataImageUrlField in Kendo UI for jQuery).

data-source Object | Array

The data source of the PanelBar for rendering the nodes (dataSource in Kendo UI for jQuery).

You can set data-source to:

  • A JavaScript object which represents any valid data source configuration.
  • A JavaScript array.
  • An existing kendo.data.HierarchicalDataSource instance.

If the dataSource option is set to a JavaScript object or an array, the Chart will initialize a new kendo.data.HierarchicalDataSource instance by using that value as a data source configuration. If the dataSource option is an existing kendo.data.HierarchicalDataSource instance, the Chart will use that instance and will not initialize a new one.

data-sprite-css-class-field String

The field of the data item that provides the sprite CSS class of the nodes (dataSpriteCssClassField in Kendo UI for jQuery). If an array, each level uses the field that is at the same index in the array, or the last item in the array.

data-text-field String | Array

The field of the data item that provides the text content of the nodes (dataTextField in Kendo UI for jQuery). If an array, each level uses the field that is at the same index in the array, or the last item in the array.

data-url-field String

The field of the data item that provides the link URL of the nodes (dataUrlField in Kendo UI for jQuery).

expand-mode String

Specifies the way the PanelBar items are displayed when the user opens and closes them (expandMode in Kendo UI for jQuery).

load-on-demand Boolean

Indicates whether the child DataSources will be fetched lazily when the parent groups are expanded (loadOnDemand in Kendo UI for jQuery). Setting load-on-demand to false causes all child DataSources that will be loaded during initialization.

messages Object

The text messages that are displayed in the PanelBar (messages in Kendo UI for jQuery). The messages property is used to customize and localize the messages. The supported composite props are available in MessagesProps.

template String | Function

The template for rendering each node (template in Kendo UI for jQuery).

Events

activate: Function

Fires when a PanelBar item is activated (activate in Kendo UI for jQuery.

collapse: Function

Fires when a PanelBar item is collapsed (collapse in Kendo UI for jQuery.

contentload: Function

Fires when content is fetched from an AJAX request (contentLoad in Kendo UI for jQuery.

databound: Function

Fires after the change event of the data source was processed due to adding or removing an item (dataBound in Kendo UI for jQuery.

error: Function

Fires when AJAX request results in an error (error in Kendo UI for jQuery.

expand: Function

Fires when a PanelBar item is expanded (expand in Kendo UI for jQuery.

select: Function

Fires when a PanelBar item is selected by the user (select in Kendo UI for jQuery.

Methods

For more details about the methods available in the component's API please check its Kendo UI for jQuery API documentation.

kendoWidget

returns

Returns the Kendo UI PanelBar instance.