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.
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Paris")
.LoadContentFrom(Url.Action("Paris", "Home"));
tabstrip.Add().Text("Sofia")
.LoadContentFrom(Url.Action("Sofia", "Home"));
})
)
<kendo-tabstrip name="tabstrip">
<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>
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>