Tab Content

The TabStrip widget offers various ways to load and configure the tab content area.

Locally Define Tab Content

The easiest way to define the tab content is to make it declaratively, using the tab.Content() configuration method:

Example
@(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>);
    })
)

Load 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 TabStrip item content area.

The example below demonstrates how to load content asynchronously using AJAX:

Example
@(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"));
    })
)

Scrollable Content

The TabStrip content containers are scrollable by default. This allows the widget to display scrollbars if it has a fixed height and holds large content that cannot fit. If needed, it is possible to disable TabStrip content scrolling. This can help in scenarios where the TabStrip hosts a widget such as a Menu that needs to overflow outside the TabStrip. To disable scrolling use the Scrollable(false) configuration method:

Depending on the browser, the content's scroll position may be reset when changing the active tab. If persisting the scroll position is required, use the select event to save the current scroll position, and the activate event to restore it.

Example
@(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"));
    })
)

See Also

In this article
Not finding the help you need? Improve this article