append

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

Example

<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>

Parameters

tab Array|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.

In this article
Not finding the help you need? Improve this article