TabStrip

Directive

kendo-tabstrip

Props

animation Boolean | Object

A collection of visual animations for the TabStrip tabs 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.

collapsible Boolean

Specifies whether the TabStrip will be able to collapse completely when the user clicks an expanded tab (collapsible in Kendo UI for jQuery).

content-urls Array

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

data-content-field String

The field of the data item that provides the text content for the content element of the tabs (dataContentField in Kendo UI for jQuery).

data-content-url-field String

The field of the data item that provides the URL for the Ajax-loaded tab content (dataContentUrlField in Kendo UI for jQuery).

data-image-url-field String

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

data-source Object | Array

The data source of the TabStrip for rendering the items (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.DataSource instance.

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

data-sprite-css-class String

The field of the data item that provides the CSS class of the tab (dataSpriteCssClass in Kendo UI for jQuery).

data-text-field String

The field of the data item that provides the text name of the tab (dataTextField in Kendo UI for jQuery).

data-url-field String

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

navigatable Boolean

Specifies whether the TabStrip will support keyboard navigation (navigatable in Kendo UI for jQuery).

scrollable Boolean | Object

If scrollable is enabled, the TabStrip displays buttons that scroll the items when they cannot fit the width of the TabStrip (scrollable in Kendo UI for jQuery). By default, scrolling is enabled. In order for the scrolling feature to work properly, you need to set the tab-position to top or bottom. Unless disabled, scrollable must be set to a JavaScript object, which represents the scrolling configuration. The supported composite props are available in ScrollableProps.

tab-position String

Specifies the position of the TabStrip tabs (tabPosition in Kendo UI for jQuery).

The supported values are:

• (Default) top
• left
• right
• bottom

For the tab-position settings that are different from the default ones, use a fade animation.

value String

The selected tab (value in Kendo UI for jQuery). Has to correspond to the dataTextField configuration and used when bound to a DataSource component.

Events

activate: Function

Fires after a tab was made visible and its animation completes (activate in Kendo UI for jQuery). Triggered only for tabs with associated content.

contentload: Function

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

error: Function

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

select: Function

Fires before a tab is selected (select in Kendo UI for jQuery).

show: Function

Fires after a tab was made visible but before the animations ends (show 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 TabStrip instance.