New to Telerik UI for ASP.NET Core? Download free 30-day trial

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>

See Also

In this article