From 11c23c5ef89cc007c52d1a340a5c7e905f8a4ea7 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 14 Nov 2025 16:33:41 +0200 Subject: [PATCH 1/3] docs(TabStri): Revamp Events examples --- components/tabstrip/events.md | 86 ++++++++++++++++++----------------- 1 file changed, 45 insertions(+), 41 deletions(-) diff --git a/components/tabstrip/events.md b/components/tabstrip/events.md index 4a2ee8522..90014e66b 100644 --- a/components/tabstrip/events.md +++ b/components/tabstrip/events.md @@ -1,9 +1,9 @@ --- title: Events page_title: TabStrip - Events -description: Events of the Tab Strip for Blazor. +description: Learn about the events and event arguments of the Telerik TabStrip for Blazor. slug: tabstrip-events -tags: telerik,blazor,tab strip,events +tags: telerik, blazor, tabstrip, events published: True position: 20 --- @@ -19,12 +19,13 @@ This article explains the events available in the Telerik TabStrip for Blazor: The `ActiveTabIdChanged` event was added in [version 9.0.0](https://www.telerik.com/support/whats-new/blazor-ui/release-history/telerik-ui-for-blazor-9-0-0-(2025-q2)). It 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](slug:tabstrip-tabs-collection). +The `ActiveTabIdChanged` event is designed to work with the new [`ActiveTabId` parameter](slug:tabstrip-tabs-collection). Update the `ActiveTabId` parameter value manually in the `ActiveTabIdChanged` handler. ->caption Handle the tab ID selection changed event +>caption Handle the ActiveTabIdChanged event ````RAZOR - + First tab content. Click through the tabs. @@ -36,58 +37,61 @@ The `ActiveTabIdChanged` event is designed to work with the new [`ActiveTabId` p -@Result +

The current active tab is @TabStripActiveTabId

@code { - private string Result { get; set; } = string.Empty; + private string TabStripActiveTabId { get; set; } = "tab1"; - private void HandleTabIdChange(string tabId) + private void TabStripActiveTabIdChanged(string newTabId) { - Result = $"The current tab ID is {tabId}"; + TabStripActiveTabId = newTabId; } } ```` ## 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. +The `ActiveTabIndexChanged` event fires when the user selects another tab. The event handler receives the new zero-based index as an argument. Update the `ActiveTabIndex` parameter value manually in the `ActiveTabIndexChanged` handler. -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. +If you programmatically remove the currently active tab, the `ActiveTabIndexChanged` event fires with index `-1` as there is no selected tab anymore. -> The `ActiveTabIndexChanged` event and `ActiveTabIndex` parameter will be deprecated in a future releases. It is recommended to use the [`ActiveTabId`](slug:tabstrip-tabs-collection) parameter with [`ActiveTabIdChanged`](slug:tabstrip-events#activetabidchanged) event instead. +> The `ActiveTabIndexChanged` event and `ActiveTabIndex` parameter will be deprecated in a future product version. Use the [`ActiveTabId`](slug:tabstrip-tabs-collection) parameter with [`ActiveTabIdChanged`](slug:tabstrip-events#activetabidchanged) event instead. ->caption Handle the tab selection changed event +>caption Handle the ActiveTabIndexChanged event ````RAZOR -@result - - - - First tab content. Click through the tabs. - - - Second tab content. - - - Third tab content. - + + + First tab content. Click through the tabs. + + + Second tab content. + + + Third tab content. + +

The current tab index is @TabStripActiveTabIndex

+ @code { - string result {get;set;} - void TabChangedHandler(int newIndex) + private int TabStripActiveTabIndex { get; set; } + + private void TabStripActiveTabIndexChanged(int newTabIndex) { - result = $"current tab {newIndex} selected on {DateTime.Now}"; + TabStripActiveTabIndex = newTabIndex; } } ```` ->caption Cancel the event +If you do not update the `ActiveTabIndex` parameter value in the `ActiveTabIndexChanged` handler, the selected tab will not change, so the event will be cancelled. -````RAZOR -@* 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 *@ +>caption Cancel the ActiveTabIndexChanged event - +````RAZOR + First tab content. Click through the tabs. @@ -99,16 +103,16 @@ If you remove programmatically the currently active tab, when it disposes, the e +

The current tab index is @TabStripActiveTabIndex

+ @code { - int ActiveTabIndex { get; set; } - - void TabChangedHandler(int newIndex) + private int TabStripActiveTabIndex { get; set; } + + private void TabStripActiveTabIndexChanged(int newTabIndex) { - // this will update the view-model for all items but the third, - // effectively cancelling the event for the third tab - if (newIndex != 2) + if (newTabIndex != 2) { - ActiveTabIndex = newIndex; + TabStripActiveTabIndex = newTabIndex; } } } @@ -116,5 +120,5 @@ If you remove programmatically the currently active tab, when it disposes, the e ## See Also - * [TabStrip Overview](slug:components/tabstrip/overview) - * [Dynamic Tabs](slug:tabstrip-tabs-collection) +* [TabStrip Overview](slug:components/tabstrip/overview) +* [Dynamic Tabs](slug:tabstrip-tabs-collection) From 24887255615a019a1e1acf997006ece79f5e93cd Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 14 Nov 2025 16:34:42 +0200 Subject: [PATCH 2/3] Update components/tabstrip/events.md --- components/tabstrip/events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabstrip/events.md b/components/tabstrip/events.md index 90014e66b..620a596a5 100644 --- a/components/tabstrip/events.md +++ b/components/tabstrip/events.md @@ -57,7 +57,7 @@ If you programmatically remove the currently active tab, the `ActiveTabIndexChan > The `ActiveTabIndexChanged` event and `ActiveTabIndex` parameter will be deprecated in a future product version. Use the [`ActiveTabId`](slug:tabstrip-tabs-collection) parameter with [`ActiveTabIdChanged`](slug:tabstrip-events#activetabidchanged) event instead. ->caption Handle the ActiveTabIndexChanged event +>caption Handle the TabStrip ActiveTabIndexChanged event ````RAZOR Date: Fri, 14 Nov 2025 16:34:49 +0200 Subject: [PATCH 3/3] Update components/tabstrip/events.md --- components/tabstrip/events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabstrip/events.md b/components/tabstrip/events.md index 620a596a5..028073632 100644 --- a/components/tabstrip/events.md +++ b/components/tabstrip/events.md @@ -21,7 +21,7 @@ The `ActiveTabIdChanged` event was added in [version 9.0.0](https://www.telerik. The `ActiveTabIdChanged` event is designed to work with the new [`ActiveTabId` parameter](slug:tabstrip-tabs-collection). Update the `ActiveTabId` parameter value manually in the `ActiveTabIdChanged` handler. ->caption Handle the ActiveTabIdChanged event +>caption Handle the TabStrip ActiveTabIdChanged event ````RAZOR