Remove Tab

Environment

Product

TabStrip for Blazor

Description

I want a close button on my tabs so the use can remove (close) them. When that happens, I want to have the previous tab selected instead of no tab.

Solution

1. Use the HeaderTemplate of the tabs to add the desired close button

2. Have conditional logic to display only the tab you want (for example, loop over a collection of tab descriptor classes, see an example in this sample project).

3. Stop the propagation of the @onclick event on the custom button.

4. Handle the ActiveTabIndexChanged event explicitly to update the selected tab index

5. In the Close button click handler use the Visible parameter to hide the tab.

Close button on a tab

Currently active tab index: @ActiveTabIndex

<TelerikTabStrip ActiveTabIndex="@ActiveTabIndex" ActiveTabIndexChanged="@TabIndexChangedHandler">
    <TabStripTab Title="static one">
        The static tab
    </TabStripTab>
    @{
        foreach (TabModel tab in Tabs)
        {
            <TabStripTab Title="@tab.Title" Visible="@tab.isVisibleTab" @key="@tab">
                <HeaderTemplate>
                    <strong>@tab.Title</strong>
                    <button type="button"
                    class="close ml-1"
                    aria-label="Close"
                        @onclick:stopPropagation
                        @onclick="@( () => CloseTab(tab))">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </HeaderTemplate>
                <Content>
                    Content for tab @tab.Title
                </Content>
            </TabStripTab>
        }
    }
</TelerikTabStrip>

@code {
    int ActiveTabIndex { get; set; } // we use it to set the new index we want active

    // sample collection of tab descriptors
    List<TabModel> Tabs = new List<TabModel>()
    {
        new TabModel { Title = "One", isVisibleTab = true },
        new TabModel { Title = "Two", isVisibleTab = true },
        new TabModel { Title = "Three", isVisibleTab = true }
    };

    protected void CloseTab(TabModel tab)
    {
        // update the active tab index only if needed - closing tabs to the right will not affect the current index
        if (Tabs.IndexOf(tab) <= ActiveTabIndex)
        {
            ActiveTabIndex = ActiveTabIndex > 0 ? ActiveTabIndex - 1 : 0;
        }

        tab.isVisibleTab = false;
    }

    void TabIndexChangedHandler(int currIndex)
    {
        ActiveTabIndex = currIndex;
    }

    public class TabModel
    {
        public string Title { get; set; }
        public bool isVisibleTab { get; set; }
    }
}