docs(TabStrip): Set tab ID as parameter (#2999)

dimodi · web-flow · commit c17611332ef1 · 2025-06-06T10:17:37.000+03:00
* docs(TabStrip): Set tab ID as parameter

* Update events.md
diff --git a/components/tabstrip/events.md b/components/tabstrip/events.md
@@ -17,30 +17,33 @@ This article explains the events available in the Telerik TabStrip for Blazor:
 
 ## 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. This event is designed to work with the new [`ActiveTabId` parameter](slug:tabstrip-tabs-collection).
+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](slug:tabstrip-tabs-collection).
 
 >caption Handle the tab ID selection changed event
 
 ````RAZOR
 <TelerikTabStrip ActiveTabIdChanged="@HandleTabIdChange">
-    <TabStripTab Title="First">
+    <TabStripTab Title="First" Id="tab1">
         First tab content. Click through the tabs.
     </TabStripTab>
-    <TabStripTab Title="Second">
+    <TabStripTab Title="Second" Id="tab2">
         Second tab content.
     </TabStripTab>
-    <TabStripTab Title="Third">
+    <TabStripTab Title="Third" Id="tab3">
         Third tab content.
     </TabStripTab>
 </TelerikTabStrip>
 
 @Result
 
 @code {
-    private string Result { get; set; }
+    private string Result { get; set; } = string.Empty;
+
     private void HandleTabIdChange(string tabId)
     {
-        Result = $"Current tab ID is {tabId}";
+        Result = $"The current tab ID is {tabId}";
     }
 }
 ````
diff --git a/components/tabstrip/tabs-collection.md b/components/tabstrip/tabs-collection.md
@@ -27,7 +27,7 @@ To deactivate all tabs, set the ActiveTabId parameter to `string.Empty`.
     @{
         foreach (var tab in Tabs)
         {
-            <TabStripTab @key="tab.Id" Title="@tab.Title" Visible="@tab.Visible" Disabled="@tab.Disabled">
+            <TabStripTab @key="@tab.Id" Id="@tab.Id" Title="@tab.Title" Visible="@tab.Visible" Disabled="@tab.Disabled">
                 <HeaderTemplate>
                     <span>@tab.Title</span>
                 </HeaderTemplate>
@@ -54,11 +54,11 @@ To deactivate all tabs, set the ActiveTabId parameter to `string.Empty`.
     private string ActiveTabId { get; set; }
 
     private List<Tab> Tabs { get; set; } = new List<Tab>
-{
-    new Tab { Id = "home", Title = "🏠 Home", Visible = true, Disabled = false },
-    new Tab { Id = "profile", Title = "👤 Profile", Visible = true, Disabled = false },
-    new Tab { Id = "settings", Title = "⚙️ Settings", Visible = true, Disabled = false }
-};
+    {
+        new Tab { Id = "home", Title = "🏠 Home", Visible = true, Disabled = false },
+        new Tab { Id = "profile", Title = "👤 Profile", Visible = true, Disabled = false },
+        new Tab { Id = "settings", Title = "⚙️ Settings", Visible = true, Disabled = false }
+    };
 
     public class Tab
     {
