A collection of visual animations used when TabStrip tab are selected through user interactions. Setting this option to false will disable all animations.

Example

$("#tabstrip").kendoTabStrip({
    animation: {
        // fade-out current tab over 1000 milliseconds
        close: {
            duration: 1000,
            effects: "fadeOut"
        },
       // fade-in new tab over 500 milliseconds
       open: {
           duration: 500,
           effects: "fadeIn"
       }
   }
});

close: Object

The visual animation(s) that will be used when the current tab is closed.

Example

$("#tabstrip").kendoTabStrip({
    animation: {
        close: {
            duration: 200,
            effects: "fadeOut"
        }
    }
});

duration: Number(default: 200)

The number of milliseconds used for the visual animation when the current tab is closed.

Example

$("#tabstrip").kendoTabStrip({
    animation: {
        close: {
                       duration: 1000
                   }
  }
});

effects: String

A whitespace-delimited string of animation effects that are utilized when the current tab is closed. By default not specified - uses the opening animation with reverse.

Example

$("#tabstrip").kendoTabStrip({
    animation: {
        close: {
            duration: 1000,
            effects: "fadeOut"
        }
    }
});

open: Object

The visual animation(s) that will be used when the new tab is shown.

Example

$("#tabstrip").kendoTabStrip({
    animation: {
        open: {
            duration: 200,
            effects: "expand:vertical"
        }
    }
});

duration: Number(default: 200)

The number of milliseconds used for the visual animation when a new tab is shown.

Example

$("#tabstrip").kendoTabStrip({
 animation: {
      open: {
          duration: 1000
      }
   }
});

effects: String(default: "expand:vertical fadeIn")

A whitespace-separated string of animation effects that are used when a new tab is shown. Options include "expand:vertical" and "fadeIn".

show: Boolean(default: true)

Specifies whether the TabStrip should be able to collapse completely when clicking an expanded tab.

Example

$("#tabstrip").kendoTabStrip({
    collapsible: true
});

Sets the field of the data item that provides the text content of the tab content element.

Example

$("#tabstrip").kendoTabStrip({
    dataTextField: "Name",
    dataContentField: "Content",
    dataSource: data
});

Sets the field of the data item that provides the URL for the ajax loaded tab content.

Example

$("#tabstrip").kendoTabStrip({
    dataTextField: "Name",
    dataContentUrlField: "ContentUrl",
    dataSource: data
});

Sets the field of the data item that provides the image URL of the tab.

Example

$("#tabstrip").kendoTabStrip({
    dataTextField: "Name",
    dataImageUrlField: "ImageUrl",
    dataSource: data
});

Sets the field of the data item that provides the CSS class of the tab.

Example

$("#tabstrip").kendoTabStrip({
    dataTextField: "Name",
    dataSpriteCssClass: "CssClass",
    dataSource: data
});

Sets the field of the data item that provides the text name of the tab.

Example

$("#tabstrip").kendoTabStrip({
    dataTextField: "Name",
    dataSource: data
});

Sets the field of the data item that provides the link URL for the tab.

Example

$("#tabstrip").kendoTabStrip({
    dataTextField: "Name",
    dataUrlField: "Url",
    dataSource: data
});