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

Append

methods

Appends a tab to the collection of tabs in a TabStrip.

append

Parameters:tabArray|Object

Target tab, specified as a JSON object. You can pass tab text, content or contentUrl here. Can handle an HTML string or array of such strings or JSON.

Returns:kendo.ui.TabStrip

Returns the TabStrip object to support chaining.

<div id="tabstrip"></div>

<script>
     var tabStrip = $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataImageUrlField: "imageUrl",
        dataContentField: "content",
        dataContentUrlField: "contentUrl",
        dataSource: [
                        {
                            text: "Tab 1",
                            content: "Tab 1 content"
                        },
                        {
                            text: "Tab 2",
                            content: "Tab 2 content"
                        },
                        {
                            text: "Tab 3",
                            content: "Tab 3 content"
                        }
                    ]
    }).data("kendoTabStrip");

    tabStrip.append(
        [{
            text: "<b>Appended Tab 1</b>",
            encoded: false,                             // Allows use of HTML for item text
            content: "Appended Tab 1 content",                             // Content for the content element
            imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png" // Provides the image URL of the tab
        },
        {
            text: "<i>Appended Tab 2</i>",
            encoded: false,                             // Allows use of HTML for item text
            contentUrl: "https://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html", // Provides the URL for the Ajax loaded tab content
            spriteCssClass: "brazilFlag"  // Item image sprite CSS class, optional.
        }]
    );
</script>
<style>
    #tabstrip .k-sprite {
    background-image: url("https://demos.telerik.com/kendo-ui/content/shared/styles/flags.png");
    }
</style>