TabStrip Events

This article explains the events available in the Telerik TabStrip for Blazor:

• ActiveTabIdChanged
• ActiveTabIndexChanged

ActiveTabIdChanged

The ActiveTabIdChanged event fires when the user changes the active tab. The event handler receives the new tab ID of type string as an argument. If the Id parameter of the TabStripTab is not set, the component will generate one automatically.

The ActiveTabIdChanged event is designed to work with the new ActiveTabId parameter.

Handle the tab ID selection changed event

<TelerikTabStrip ActiveTabIdChanged="@HandleTabIdChange">
    <TabStripTab Title="First" Id="tab1">
        First tab content. Click through the tabs.
    </TabStripTab>
    <TabStripTab Title="Second" Id="tab2">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third" Id="tab3">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

@Result

@code {
    private string Result { get; set; } = string.Empty;

    private void HandleTabIdChange(string tabId)
    {
        Result = $"The current tab ID is {tabId}";
    }
}

ActiveTabIndexChanged

The ActiveTabIndexChanged event fires when the user changes the tab that is currently shown. The event handler receives the new index as an argument.

If you remove programmatically the currently active tab, when it disposes, the event will fire with index -1 as there will be no selected tab anymore.

The ActiveTabIndexChanged event and ActiveTabIndex parameter will be deprecated in a future releases. It is recommended to use the ActiveTabId parameter with ActiveTabIdChanged event instead.

Handle the tab selection changed event

@result

<TelerikTabStrip ActiveTabIndexChanged="@TabChangedHandler">
	<TabStripTab Title="First">
		First tab content. Click through the tabs.
	</TabStripTab>
	<TabStripTab Title="Second">
		Second tab content.
	</TabStripTab>
	<TabStripTab Title="Third">
		Third tab content.
	</TabStripTab>
</TelerikTabStrip>

@code {
    string result {get;set;}
    void TabChangedHandler(int newIndex)
    {
        result = $"current tab {newIndex} selected on {DateTime.Now}";
    }
}

Cancel the event

@* If the tab strip is bound to a field in the view model, when you do not update that field in the event handler, you will effectively cancel the event *@

<TelerikTabStrip ActiveTabIndex="@ActiveTabIndex" ActiveTabIndexChanged="@TabChangedHandler">
    <TabStripTab Title="First">
        First tab content. Click through the tabs.
    </TabStripTab>
    <TabStripTab Title="Second">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

@code {
    int ActiveTabIndex { get; set; }
    
    void TabChangedHandler(int newIndex)
    {
        // this will update the view-model for all items but the third, 
        // effectively cancelling the event for the third tab
        if (newIndex != 2)
        {
            ActiveTabIndex = newIndex;
        }
    }
}

See Also

• TabStrip Overview
• Dynamic Tabs