New to Kendo UI for jQuery? Start a free 30-day trial
DataSource Binding
The TabStrip dataSource allows you to configure various features of the component related to the content and its visual representation. You can define multiple fields such as text, content, and icon from the list of Kendo Icons, etc.
The example below shows the more commonly used fields in the TabStrip dataSource:
<div id="tabstrip"></div>
<script>
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
dataSource: [
{ text: "Home", content: "Welcome to the Home tab.", icon: "home", iconPosition: "before" },
{ text: "Profile", content: "This is your Profile information.", icon: "user", iconPosition: "before" },
{ text: "Settings", content: "Adjust your Settings here.", icon: "gear", iconPosition: "after", closable: true },
],
dataTextField: "text",
dataContentField: "content",
dataIconField: "icon",
dataIconPositionField: "iconPosition",
});
});
</script>Actions
You can also define actions which will render buttons inside the tabs. Below you will find how to configure actions for a tab:
<div id="tabstrip"></div>
<script>
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
dataSource: [
{ text: "Home", content: "Welcome to the Home tab.", icon: "home", iconPosition: "before" },
{
text: "Tab with actions",
content: "Tab content",
actions: [
{
icon: "pencil",
action: function(e) {
console.log("Edit tab", e);
}
},
{
icon: "arrow-rotate-ccw",
action: function(e) {
console.log("Refresh tab", e);
}
}
]
}
],
dataTextField: "text",
dataContentField: "content",
dataIconField: "icon",
dataIconPositionField: "iconPosition",
});
});
</script>