This is a migrated thread and some comments may be shown as answers.

Prevent tab change

2 Answers 624 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
George
Top achievements
Rank 1
George asked on 05 Nov 2020, 09:25 AM

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?

2 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 05 Nov 2020, 09:38 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Dustin
Top achievements
Rank 2
Iron
Iron
commented on 02 Aug 2023, 09:50 PM

Is there a way to prevent the tab change event from happenning at all. When I use this method and I have a Razor Component in my tab contenxt, it rerenders the component causing it to load all of my data again in the OnInitializedAsync() call. I'd like to stop that from happening if certain conditions are met.
Dimo
Telerik team
commented on 04 Aug 2023, 09:26 AM

@Dustin - currently it's not possible to prevent tab change at all, but there is a feature request about cancellable TabStrip navigation.
Dustin
Top achievements
Rank 2
Iron
Iron
commented on 04 Aug 2023, 02:57 PM

Awesome, thanks for the info! I gave that item a vote.
0
George
Top achievements
Rank 1
answered on 05 Nov 2020, 10:20 AM

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 :)

Tags
TabStrip
Asked by
George
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
George
Top achievements
Rank 1
Share this question
or