TabStrip Events
This article explains the events available in the Telerik TabStrip for Blazor:
ActiveTabIdChanged
The ActiveTabIdChanged event was added in version 9.0.0. It fires when the user changes the active tab. The event handler receives the new tab Id as a string argument. If the Id parameter of the TabStripTab is not set, the component generates a Guid automatically during initialization.
The ActiveTabIdChanged event is designed to work with the ActiveTabId parameter. Update the ActiveTabId parameter value manually in the ActiveTabIdChanged handler.
Using the TabStrip ActiveTabIdChanged event
<TelerikTabStrip ActiveTabId="@TabStripActiveTabId"
ActiveTabIdChanged="@TabStripActiveTabIdChanged">
<TabStripTab Title="First" Id="tab1">
First tab content. Click through the tabs.
</TabStripTab>
<TabStripTab Title="Second">
Second tab content. This tab has an autogenerated <code>Id</code>.
</TabStripTab>
</TelerikTabStrip>
<p>The current active tab is <strong><code>@TabStripActiveTabId</code></strong>.</p>
@code {
private string TabStripActiveTabId { get; set; } = "tab1";
private void TabStripActiveTabIdChanged(string newTabId)
{
TabStripActiveTabId = newTabId;
}
}OnStateChanged
The OnStateChanged event fires whenever the user interacts with the TabStrip and changes the active tab, visible tabs, pinned tabs, or tab order.
The event handler receives a TabStripStateEventArgs argument with a TabStripState property. Read more details in the State Management article.
Using the TabStrip OnStateChanged event
<TelerikTabStrip @bind-ActiveTabId="@ActiveTabId"
EnableTabReorder="true"
OnStateChanged="@OnTabStripStateChanged">
<TabStripTab Id="tab1" Closeable="true" Pinnable="true" Title="First" @bind-Visible="@Tab1Visible">
First tab content.
</TabStripTab>
<TabStripTab Id="tab2" Closeable="true" Pinnable="true" Title="Second" @bind-Visible="@Tab2Visible">
Second tab content.
</TabStripTab>
<TabStripTab Id="tab3" Closeable="true" Pinnable="true" Title="Third" @bind-Visible="@Tab3Visible">
Third tab content.
</TabStripTab>
</TelerikTabStrip>
<p>Last <code>OnStateChanged</code> event: @TabStripStateChangedLog</p>
@code {
private string ActiveTabId { get; set; } = "tab1";
private bool Tab1Visible { get; set; } = true;
private bool Tab2Visible { get; set; } = true;
private bool Tab3Visible { get; set; } = true;
private string TabStripStateChangedLog { get; set; } = string.Empty;
private void OnTabStripStateChanged(TabStripStateEventArgs args)
{
string activeTabId = args.TabStripState.ActiveTabId;
int pinnedTabsCount = args.TabStripState.TabStates.Count(x => x.Pinned);
int visibleTabsCount = args.TabStripState.TabStates.Count(x => x.Visible);
TabStripStateChangedLog = $"fired at {DateTime.Now.ToString("HH:mm:ss")} with active tab '{activeTabId}', {pinnedTabsCount} pinned tabs, and {visibleTabsCount} visible tabs.";
}
}OnStateInit
The OnStateInit event fires once when the TabStrip initializes. Unlike other Telerik Blazor components where OnStateInit fires early in the component lifecycle, the TabStrip fires it during OnAfterRenderAsync on the first render. This later timing is required by the component to detect which tabs are overflowing before the initial state is reported.
Use this event to inspect, customize, or restore the initial state of the TabStrip, for example, from a persistent storage.
When setting the active tab through the TabStrip state, also set the ActiveTabId parameter.
The event handler receives a TabStripStateEventArgs argument with a TabStripState property. Read more details in the State Management article.
Using the TabStrip OnStateInit event
<TelerikTabStrip @bind-ActiveTabId="@TabStripActiveTabId"
EnableTabReorder="true"
OnStateInit="@OnTabStripStateInit">
<TabStripTab Title="First" Id="tab1" Pinnable="true">
First tab content.
</TabStripTab>
<TabStripTab Title="Second" Id="tab2" Pinnable="true">
Second tab content.
</TabStripTab>
<TabStripTab Title="Third" Id="tab3" Pinnable="true">
Third tab content.
</TabStripTab>
</TelerikTabStrip>
@code {
private string TabStripActiveTabId { get; set; } = "tab1";
private void OnTabStripStateInit(TabStripStateEventArgs args)
{
string restoredTabId = "tab2";
args.TabStripState.ActiveTabId = "tab2";
TabStripActiveTabId = restoredTabId;
args.TabStripState.TabStates.First().Pinned = true;
}
}OnTabDrop
The OnTabDrop event fires when the user completes a tab reorder and releases the dragged tab. Unlike the OnTabReorder event, OnTabDrop always fires once per reorder operation.
The OnTabDrop event handler receives a TabStripTabDropEventArgs argument.
To enable tab reordering, set the TabStrip EnableTabReorder parameter to true.
Using the TabStrip OnTabDrop event
<TelerikTabStrip @bind-ActiveTabId="@TabStripActiveTabId"
EnableTabReorder="true"
OnTabDrop="@OnTabStripTabDrop">
@for (int i = 1; i <= 5; i++)
{
string tabId = $"tab{i}";
string tabTitle = $"Tab {i}";
<TabStripTab @key="@tabId" Title="@tabTitle" Id="@tabId">
Content for @tabTitle.
</TabStripTab>
}
</TelerikTabStrip>
<p>Last <code>OnTabDrop</code> event: @TabDropLog</p>
@code {
private string TabStripActiveTabId { get; set; } = "tab1";
private string TabDropLog { get; set; } = string.Empty;
private void OnTabStripTabDrop(TabStripTabDropEventArgs args)
{
TabDropLog = $"Tab '{args.Id}' dropped at index {args.DestinationIndex}.";
}
}OnTabReorder
The OnTabReorder event fires when a tab changes its order index during user dragging. The event can fire multiple times during a single user reorder operation. Compare with OnTabDrop, which fires only once per reorder operation.
The OnTabReorder event handler receives a TabStripTabReorderEventArgs argument.
To enable tab reordering, set the TabStrip EnableTabReorder parameter to true.
Tab reordering also triggers the OnStateChanged event, which fires before OnTabReorder.
Using the TabStrip OnTabReorder event
<TelerikTabStrip @bind-ActiveTabId="@TabStripActiveTabId"
EnableTabReorder="true"
OnTabReorder="@OnTabStripTabReorder">
@for (int i = 1; i <= 5; i++)
{
string tabId = $"tab{i}";
string tabTitle = $"Tab {i}";
<TabStripTab @key="@tabId" Title="@tabTitle" Id="@tabId">
Content for @tabTitle.
</TabStripTab>
}
</TelerikTabStrip>
<p>Last <code>OnTabReorder</code> event: @TabReorderLog</p>
@code {
private string TabStripActiveTabId { get; set; } = "tab1";
private string TabReorderLog { get; set; } = string.Empty;
private void OnTabStripTabReorder(TabStripTabReorderEventArgs args)
{
TabReorderLog = $"Tab '{args.Id}' moved to index {args.Position}.";
}
}PinnedChanged
The Tab PinnedChanged event fires when the user pins or unpins a tab. The event handler receives a boolean value with the new tab pinned state.
Update the Pinned parameter value in the PinnedChanged handler.
Using the TabStripTab PinnedChanged event
<TelerikTabStrip @bind-ActiveTabId="@TabStripActiveTabId"
EnableTabReorder="true">
<TabStripTab Id="alpha"
Pinnable="true"
Pinned="@AlphaPinned"
PinnedChanged="@AlphaPinnedChanged"
Title="Alpha">
Alpha tab content.
</TabStripTab>
<TabStripTab Id="beta"
Pinnable="true"
Pinned="@BetaPinned"
PinnedChanged="@BetaPinnedChanged"
Title="Beta">
Beta tab content.
</TabStripTab>
<TabStripTab Id="gamma"
Title="Gamma">
Gamma tab content.
</TabStripTab>
</TelerikTabStrip>
<p>Last <code>PinnedChanged</code> event: @PinnedChangedEventLog</p>
@code {
private string TabStripActiveTabId { get; set; } = "alpha";
private bool AlphaPinned { get; set; }
private bool BetaPinned { get; set; } = true;
private string PinnedChangedEventLog { get; set; } = string.Empty;
private void AlphaPinnedChanged(bool newPinned)
{
AlphaPinned = newPinned;
PinnedChangedEventLog = $"Alpha tab pinned state changed to {newPinned}";
}
private void BetaPinnedChanged(bool newPinned)
{
BetaPinned = newPinned;
PinnedChangedEventLog = $"Beta tab pinned state changed to {newPinned}";
}
}VisibleChanged
The Tab VisibleChanged event fires when the user closes a tab. The event handler receives a boolean value with the new tab visibility.
Update the Visible parameter value in the VisibleChanged handler. You can also display a confirmation prompt before hiding a tab or reuse a single handler for multiple tabs.
Using the TabStripTab VisibleChanged event
<TelerikTabStrip @bind-ActiveTabId="@TabStripActiveTabId"
Height="200px">
<TabStripTab Id="tab1"
Closeable="true"
Title="Tab 1"
Visible="@TabVisible"
VisibleChanged="@TabVisibleChanged">
<p>First tab content.</p>
</TabStripTab>
<TabStripTab Id="tab2"
Title="Tab 2">
<p>Second tab content.</p>
</TabStripTab>
</TelerikTabStrip>
<p>Last <code>VisibleChanged</code> event: @VisibleChangedEventLog</p>
<TelerikButton OnClick="@(() => TabVisible = true)">Show Closed Tab</TelerikButton>
@code {
private string TabStripActiveTabId { get; set; } = "tab1";
private bool TabVisible { get; set; } = true;
private string VisibleChangedEventLog { get; set; } = string.Empty;
private async Task TabVisibleChanged(bool newVisible)
{
TabVisible = newVisible;
VisibleChangedEventLog = $"Tab 1 visibility changed to {newVisible} at {DateTime.Now.ToString("HH:mm:ss")}";
}
}