diff --git a/components/tabstrip/persist-content.md b/components/tabstrip/persist-content.md index 6624a3aba0..1bf366e562 100644 --- a/components/tabstrip/persist-content.md +++ b/components/tabstrip/persist-content.md @@ -46,4 +46,5 @@ To keep Tab content in the DOM after the Tab is deactivated, set the `PersistCon ## See Also - * [Live Demo: TabStrip - Persist Tab Content](https://demos.telerik.com/blazor-ui/tabstrip/persist-content) +* [Live Demo: TabStrip - Persist Tab Content](https://demos.telerik.com/blazor-ui/tabstrip/persist-content) +* [Render All TabStrip Tabs Initially]({%slug tabstrip-kb-load-all-tabs%}) diff --git a/knowledge-base/tabstrip-load-all-tabs-initially.md b/knowledge-base/tabstrip-load-all-tabs-initially.md new file mode 100644 index 0000000000..5052a10875 --- /dev/null +++ b/knowledge-base/tabstrip-load-all-tabs-initially.md @@ -0,0 +1,87 @@ +--- +title: Render All TabStrip Tabs Initially +description: Learn how to initialize, load and render all tabs on page load in the Telerik TabStrip for Blazor. +type: how-to +page_title: How to Render All TabStrip Tabs By Default +slug: tabstrip-kb-load-all-tabs +tags: telerik, blazor, tabstrip +ticketid: 1673750, 1654667 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductTabStrip 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"`]({%slug tabstrip-persist-content%}), 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: + +1. Move the tab content outside the TabStrip. Use one HTML `
` to hold the contents of each tab. The `` tags cannot remain completely empty, so add some dummy content such as ` `. +1. Hide the TabStrip tab container elements (`
`) with a `display:none` CSS style. +1. Toggle the `display` styles of the HTML `
`s in the [TabStrip `ActiveTabIndexChanged` event]({%slug tabstrip-events%}#activetabindexchanged). + +>caption Render all TabStrip tabs initially + +````RAZOR + +   +   +   + + +
+
+ First Tab Content +
+
+ Second Tab Content +
+
+ Third Tab Content +
+
+ + + +@code { + public int ActiveTabIndex { get; set; } + + private string GetTabActive(int index) + { + return ActiveTabIndex == index ? "k-active" : string.Empty; + } +} +```` + +## See Also + +* [Persist TabStrip Tab Content]({%slug tabstrip-persist-content%}) +* [TabStrip Events]({%slug tabstrip-events%})