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