TabStrip Overview

Telerik UI for ASP.NET Core Ninja image

The TabStrip is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Telerik UI TabStrip TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI TabStrip widget.

The TabStrip displays a collection of tabs with associated content. It is composed of an unordered list of items which represent tabs, and a collection of div elements, which contain the content for each tab.

Initializing the TabStrip

The following example demonstrates how to define the TabStrip.

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Items(tabstrip =>
    {
        tabstrip.Add().Text("Paris")
            .Selected(true)
            .Content(@<text>
                <div class="weather">
                    <p>Rainy weather in Paris.</p>
                </div>
            </text>);

        tabstrip.Add().Text("Sofia")
            .Content(@<text>
                <div class="weather">
                    <p>Sunny weather in Sofia.</p>
                </div>
            </text>);

        tabstrip.Add().Text("Moscow")
            .Content(@<text>
                <div class="weather">
                    <p>Cloudy weather in Moscow.</p>
                </div>
            </text>);

        tabstrip.Add().Text("Sydney")
            .Content(@<text>
                <div class="weather">
                    <p>Rainy weather in Sidney.</p>
                </div>
            </text>);
    })
)
<kendo-tabstrip name="tabstrip">
    <items>
        <tabstrip-item text="Paris"
                       selected="true">
            <content>
                <div class="weather">
                    <p>Rainy weather in Paris.</p>
                </div>
            </content>
        </tabstrip-item>
        <tabstrip-item text="Sofia">
            <content>
                <div class="weather">
                    <p>Sunny weather in Sofia.</p>
                </div>
            </content>
        </tabstrip-item>
        <tabstrip-item text="Moscow">
            <content>
                <div class="weather">
                    <p>Cloudy weather in Moscow.</p>
                </div>
            </content>
        </tabstrip-item>
        <tabstrip-item text="Sydney">
            <content>
                <div class="weather">
                    <p>Rainy weather in Sidney.</p>
                </div>
            </content>
        </tabstrip-item>
    </items>
</kendo-tabstrip>
public class TabStripController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

Basic Configuration

The following example demonstrates the basic configuration of the TabStrip.

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .TabPosition(TabStripTabPosition.Bottom)
    .Collapsible(true)
    .Navigatable(false)
    .Animation(animation =>
    {
        animation.Open(config =>
        {
            config.Fade(FadeDirection.In);
        });
    })
    .Items(items =>
    {
        items.Add().Text("One")
            .Content(@<text>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </text>);

        items.Add().Text("Two")
            .Content(@<text>
                <p>Mauris pulvinar molestie accumsan.</p>
            </text>);
    })
)

<script type="text/javascript">
    $(function () {
        // The Name() of the TabStrip is used to get its client-side instance.
        var tabstrip = $("#tabstrip").data("kendoTabStrip");
        console.log(tabstrip);
    });
</script>
<kendo-tabstrip name="tabstrip"
                tab-position="bottom"
                collapsible="true"
                navigatable="false">
    <popup-animation>
        <open duration="300" effects="fade:in" />
    </popup-animation>
    <items>
        <tabstrip-item text="One">
            <content>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </content>
        </tabstrip-item>
        <tabstrip-item text="Two">
            <content>
                <p>Mauris pulvinar molestie accumsan.</p>
            </content>
        </tabstrip-item>
    </items>
</kendo-tabstrip>

<script type="text/javascript">
    $(function () {
        // The Name() of the TabStrip is used to get its client-side instance.
        var tabstrip = $("#tabstrip").data("kendoTabStrip");
        console.log(tabstrip);
    });
</script>

Functionality and Features

Events

The following example demonstrates the available TabStrip events and how an event handler could be implemented for each of them. For a complete example on basic TabStrip events, refer to the demo on using the events of the TabStrip.

@(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"));
    })
    .Events(events => events
        .Show("onShow")
        .Select("onSelect")
        .Activate("onActivate")
        .ContentLoad("onContentLoad")
        .Error("onError")
    )
)
<kendo-tabstrip name="tabstrip"
                on-show="onShow"
                on-select="onSelect"
                on-activate="onActivate"
                on-content-load="onContentLoad"
                on-error="onError">
    <items>
        <tabstrip-item text="Paris"
                       content-url="@Url.Action("Paris", "Home")">

        </tabstrip-item>
        <tabstrip-item text="Sofia"
                        content-url="@Url.Action("Sofia", "Home")">

        </tabstrip-item>
    </items>
</kendo-tabstrip>

<script type="text/javascript">
    function onShow(e) {
        console.log("Shown: " + $(e.item).find("> .k-link").text());
    }

    function onSelect(e) {
        console.log("Selected: " + $(e.item).find("> .k-link").text());
    }

    function onActivate(e) {
        console.log("Activated: " + $(e.item).find("> .k-link").text());
    }

    function onContentLoad(e) {
        console.log("Content loaded in <b>"+ $(e.item).find("> .k-link").text() + "</b>");
    }

    function onError(e) {
        console.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
    }
</script>

See Also

In this article