New to Telerik UI for Blazor? Start a free 30-day trial
Render All TabStrip Tabs Initially
Updated on Jun 4, 2026
Environment
| Product | TabStrip for Blazor |
Description
This KB answers the following questions:
- How to preload the contents of all TabStrip tabs and keep it rendered in the DOM at all times?
- How to load and render all the content of a Telerik TabStrip for Blazor?
- How to access components in TabStrip tabs that haven't been opened by the user?
Solution
Even when PersistTabContent="true", the TabStrip initializes and renders each tab container for the first time only after the user clicks on the respective tab to activate it. This improves the app performance.
In scenarios where all TabStrip tabs must render initially and be in the DOM at all times, use the following approach:
- Move the tab content outside the TabStrip. Use one HTML
<div>to hold the contents of each tab. The<TabStripTab>tags cannot remain completely empty, so add some dummy content such as . - Hide the TabStrip tab container elements (
<div class="k-tabstrip-content">) with adisplay:noneCSS style. - Toggle the
displaystyles of the HTML<div>s
Render all TabStrip tabs initially
<TelerikTabStrip @bind-ActiveTabId="@ActiveTabId"
Class="empty-tabstrip">
<TabStripTab Title="First Tab" Id="tab1"> </TabStripTab>
<TabStripTab Title="Second Tab" Id="tab2"> </TabStripTab>
<TabStripTab Title="Third Tab" Id="tab3"> </TabStripTab>
</TelerikTabStrip>
<div class="tabstrip-containers k-tabstrip">
<div class="@( $"k-tabstrip-content {GetTabActive("tab1")}" )">
First Tab Content
</div>
<div class="@( $"k-tabstrip-content {GetTabActive("tab2")}" )">
Second Tab Content
</div>
<div class="@( $"k-tabstrip-content {GetTabActive("tab3")}" )">
Third Tab Content
</div>
</div>
<style>
/* hide built-in tab containers */
.empty-tabstrip .k-tabstrip-content {
display: none !important;
}
/* adjust tab borders */
.tabstrip-containers .k-tabstrip-content {
border-top-width: 0;
}
</style>
@code {
// Initialize with the ID of the default active tab
public string ActiveTabId { get; set; } = "tab1";
private string GetTabActive(string tabId)
{
return ActiveTabId == tabId ? "k-active" : string.Empty;
}
}