Prevent tab change

[George]

How can I programmatically prevent the active tab page changing?

I'm really looking for something like ActiveTabIndexChanging, where the change can be cancelled based on some logic. Is there a workaround for this?

[Marin Bratanov]

Hello George,

That event already exists: https://docs.telerik.com/blazor-ui/components/tabstrip/events

If you don't update your view-model and the tab strip binds to an tab index field, you will effectively cancel the event, as is the typical behavior of two-way binding.

Here's an example I made for you:

<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;
        }
    }
}

Regards,
Marin Bratanov
Progress Telerik

[George]

I was looking for ActiveTabIndexChanging rather than ActiveTabIndexChanged.

I didn't have ActiveTabIndex bound to anything, so even with a return in the event handler the tab changed.

Binding ActiveTabIndex works for me though. Thanks :)