PanelBar

Example

Razor

<kendo-panelbar>
    <animation></animation>
    <hierarchical-datasource></hierarchical-datasource>
    <items></items>
    <li></li>
    <messages />
</kendo-panelbar>

ChildTags

Tag Name	Details
animation	PanelBarAnimationSettingsTagHelper
hierarchical-datasource	HierarchicalDataSourceTagHelper
items	PanelBarItemsTagHelper
li
messages	PanelBarMessagesSettingsTagHelper

Attributes

Attribute	Type	Description
name	String	Sets the name of the component.
as-module	Boolean	Specifies whether the initialization script of the component will be rendered as a JavaScript module.
is-in-client-template	Boolean	When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
deferred	Boolean	Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
auto-bind	Boolean	If set to false the widget will not bind to the data source during initialization. In this case data binding will occur when the change event of the data source is fired. By default the widget will bind to the data source specified in the configuration.
bind-to	IEnumerable<PanelBarItemBase>	Binds a list of items to the PanelBar.
data-icon-class-field	String	Sets the field of the data item that provides the custom class for the icon element of the PanelBar nodes.
data-icon-field	String	Sets the field of the data item that provides the icon name of the PanelBar nodes.
data-image-url-field	String	Sets the field of the data item that provides the image URL of the PanelBar nodes.
data-source-id	String	The Id of the data source.
data-sprite-css-class-field	String	Sets the field of the data item that provides the sprite CSS class of the nodes. 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	Sets the field of the data item that provides the text content of the nodes. 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	Sets the field of the data item that provides the link URL of the nodes.
expand-mode	String	Specifies how the PanelBar items are displayed when opened and closed. The following values are available:
load-on-demand	Boolean	Indicates whether the child DataSources should be fetched lazily when parent groups get expanded. Setting this to false causes all child DataSources to be loaded at initialization time.
on-activate	String	The name of the JavaScript function that will handle the activate event. Triggered when an item of a PanelBar is activated.
on-collapse	String	The name of the JavaScript function that will handle the collapse event. Triggered when an item of a PanelBar is collapsed.
on-content-load	String	The name of the JavaScript function that will handle the contentLoad event. Fires when content is fetched from an AJAX request.
on-data-bound	String	The name of the JavaScript function that will handle the dataBound event. Triggered after the dataSource change event has been processed (adding/removing items);
on-error	String	The name of the JavaScript function that will handle the error event. Fires when AJAX request results in an error.
on-expand	String	The name of the JavaScript function that will handle the expand event. Triggered when an item of a PanelBar is expanded.
on-select	String	The name of the JavaScript function that will handle the select event. Triggered when an item of a PanelBar is selected by the user.
script-attributes	IDictionary<String,Object>	Sets the attributes that will be added to the script tag of the component's initialization script.
template	String	Template for rendering each node.
template-handler	String	Template for rendering each node. This option expects the name of a JavaScript function that will be called to return the template.
template-id	String	Template for rendering each node. This option expects the ID of the script element that contains the template.
template-view	IHtmlContent	Template for rendering each node. This option expects the instance containing the created HTML.