When I create multiple tabs and each tab has the same type of component, the OnInitialized is only running for the first one I click on.
Here is a simplified example to demonstrate:
MAIN PAGE:
@page "/tabtest"
@using Telerik.Blazor.Components
<div>Product XYZ</div>
<TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top" @ref="productTabStrip" @bind-ActiveTabIndex="@ActiveTabIndex">
<TabStripTab Title="Details">
<div class="container sms-tab-content">
GENERAL PRODUCT INTRO STUFF HERE
</div>
</TabStripTab>
@foreach (var item in listOfWidgets)
{
<TabStripTab Title="@item.WidgetName" Disabled="false">
<Widget WidgetID="@item.WidgetID" WidgetName="@item.WidgetName" />
</TabStripTab>
}
</TelerikTabStrip>
<div style="margin-top: 15px;">
<div><b>Below is a flat non-tab example of repeating widgets:</b></div>
@foreach (var item in listOfWidgets)
{
<Widget WidgetID="@item.WidgetID" WidgetName="@item.WidgetName" />
}
</div>
@code {
Telerik.Blazor.Components.TelerikTabStrip productTabStrip;
public int ActiveTabIndex { get; set; } = 0;
protected class Widget
{
public int WidgetID { get; set; }
public string WidgetName { get; set; }
}
private List<Widget> listOfWidgets = new List<Widget>();
protected void GetData()
{
listOfWidgets.Add(new Widget { WidgetID = 1, WidgetName = "Cog" });
listOfWidgets.Add(new Widget { WidgetID = 2, WidgetName = "Wheel" });
listOfWidgets.Add(new Widget { WidgetID = 3, WidgetName = "Bloof" });
}
protected override void OnInitialized()
{
GetData();
}
}
WIDGET COMPONENT:
@page "/widget/{WidgetID:int}/{WidgetName}"