Tab Content
The TabStrip provides options for loading and configuring its tab content area.
Defining Content Locally
To define the tab content declaratively, use the tab.Content() configuration method.
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Paris")
.Content(@<text>
<p>Rainy weather in Paris.</p>
</text>);
tabstrip.Add().Text("Sofia")
.Content(@<text>
<p>Sunny weather in Sofia.</p>
</text>);
})
)
<kendo-tabstrip name="tabstrip">
<items>
<tabstrip-item text="Paris">
<content>
<p>Rainy weather in Paris.</p>
</content>
</tabstrip-item>
<tabstrip-item text="Sofia">
<content>
<p>Sunny weather in Sofia.</p>
</content>
</tabstrip-item>
</items>
</kendo-tabstrip>
Loading Content with AJAX
Telerik UI for ASP.NET Core TabStrip provides built-in support for asynchronously loading content from remote URLs. These URLs return HTML content that can be loaded in the item content area of the TabStrip.
The following example demonstrates how to load the tab content asynchronously by using AJAX. The Telerik UI for ASP.NET Core 2024 Q3 Release adds the Data, Type and Headers overloads of the TabStripItemBuilder to provide support for configuring additional jQuery.ajax options of the request, fetching the Tab content from to the remote endpoint:
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Paris")
.LoadContentFrom(Url.Action("Paris", "Home")).Data("additionalData").Type(HttpVerbs.Post);
tabstrip.Add().Text("Sofia")
.LoadContentFrom(Url.Action("Sofia", "Home"));
})
)
<kendo-tabstrip name="tabstrip">
<items>
<tabstrip-item text="Paris"
content-url="@Url.Action("Paris", "Home")"
data="additionalData"
type="POST">
</tabstrip-item>
<tabstrip-item text="Sofia"
content-url="@Url.Action("Paris", "Home")">
</tabstrip-item>
</items>
</kendo-tabstrip>
function additionalData(){
return {
myParam: "myValue"
}
}
Scrollable Content
By default, the containers of the TabStrip content are scrollable which enables a TabStrip with a fixed height and large content that cannot fit to display scrollbars. You can also disable the scrolling of the TabStrip content which is useful when the TabStrip hosts a widget (such as a Menu) that needs to overflow the TabStrip. To disable the scrolling of the TabStrip content, use the Scrollable(false) method of the Kendo UI for jQuery widget.
Depending on the browser, you can reset the scroll position of the content when the active tab is changed. To persist the scroll position, use the select event of the Kendo UI for jQuery widget to save the current scroll position and then the activate event to restore it.
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Scrollable(false)
.Items(tabstrip =>
{
tabstrip.Add().Text("Paris")
.LoadContentFrom(Url.Action("Paris", "Home"));
tabstrip.Add().Text("Sofia")
.LoadContentFrom(Url.Action("Sofia", "Home"));
})
)
<kendo-tabstrip name="tabstrip">
<scrollable enabled="false"/>
<items>
<tabstrip-item text="Paris"
content-url="@Url.Action("Paris", "Home")">
</tabstrip-item>
<tabstrip-item text="Sofia"
content-url="@Url.Action("Paris", "Home")">
</tabstrip-item>
</items>
</kendo-tabstrip>