A TabStrip displays a collection of tabs with associated content. It is composed of an unordered list of items - representing tabs - and a collection of div elements, which contain the content for each tab.

Getting Started

Create an unordered list for tabs with associated div elements for content

<div id="tabStrip">
    <ul>
        <li>First tab</li>
        <li>Second tab</li>
    </ul>
    <div>First tab content</div>
    <div>Second tab content</div>
</div>

Initialization of a TabStrip should occur after the DOM is fully loaded. It is recommended that initialization the TabStrip occur within a handler is provided to $(document).ready().

Initialize a TabStrip using a selector within $(document).ready()

$(document).ready(function() {
    $("#tabStrip").kendoTabStrip();
});

Initialize the TabStrip using JSON data object

$(document).ready(function() {
    $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataContentField: "content",
        dataSource:
        [
            { text: "Tab 1", content: "Tab 1 content" },
            { text: "Tab 2", content: "Tab 2 content" }
        ]
    });
});

The tabs of a TabStrip are not required to have content. Should a tab have no content, it is safe to omit its associated div.

Loading TabStrip content with AJAX

While any valid technique for loading AJAX content can be used, a TabStrip supports loading content from URLs in an asynchronous manner. These URLs should return HTML fragments that can be loaded in a TabStrip content area.

Loading Tab content asynchronously

<div id="tabstrip">
    <ul>
        <li>First Tab</li>
        <li>Second Tab</li>
    </ul>
    <div></div>
    <div></div>
 </div>

Initialize TabStrip and configure one tab with async content loading

$(document).ready(function(){
    $("#tabstrip").kendoTabStrip({
        contentUrls: [null, "html-content-snippet.html"]
    });
 });

Dynamically Configure TabStrip Tabs

The TabStrip API provides several methods for dynamically adding or removing tabs. To add tabs, provide the new item as a JSON object along with a reference item that will be used to determine the placement in the TabStrip. Note: append() does not require a reference item.

A reference item is simply a target DOM element of a tab that already exists in the TabStrip. Any valid selector may be used to obtain a reference to the target item.

Removing an item requires a reference to the target element.

Dynamically add a new tab

var tabStrip = $("#tabStrip").data("kendoTabStrip");
tabStrip.insertAfter(
    { text: "New Tab" },
    tabstrip.tabGroup.children("li:last")
);

Selecting a Tab on Initial Load

It is possible to select a tab and display its associated content upon its initial load. There are two (2) ways to accomplish this task:

  1. Add a "k-state-active" class to the DOM element of the tab
  2. Use select() to target and select a tab either by selector or index

Both approaches produce the same result.

Selecting a default tab manually using HTML

<div id="tabstrip">
    <ul>
        <li class="k-state-active">First Tab</li>
        <li>Second Tab</li>
    </ul>
    <div></div>
    <div></div>
</div>

Initialize a TabStrip and select first tab via select(element)

$(document).ready(function(){
    var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    tabstrip.select(tabstrip.tabGroup.children("li:first"));
});

Initialize a TabStrip and select first tab via select(index)

$(document).ready(function(){
    var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    tabstrip.select(1);
});

Accessing an Existing TabStrip

You can reference an existing TabStrip instance via jQuery.data(). Once a reference has been established, you can use the API to control its behavior.

Accessing an existing TabStrip instance

var tabStrip = $("#tabStrip").data("kendoTabStrip");