From 95c158bd8e69f21f8ff72a32fffd2630ab7d0e24 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 18 Dec 2024 13:52:32 +0200 Subject: [PATCH 1/2] kb(tabstrip): Add KB for loading all tabs by default --- components/tabstrip/persist-content.md | 3 +- .../tabstrip-load-all-tabs-initially.md | 87 +++++++++++++++++++ 2 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 knowledge-base/tabstrip-load-all-tabs-initially.md 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..c2880f782c --- /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. +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%}) From b2dd6880f11d44a7841038c5aa1c03b558a37a0c Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 18 Dec 2024 13:55:48 +0200 Subject: [PATCH 2/2] Update knowledge-base/tabstrip-load-all-tabs-initially.md --- knowledge-base/tabstrip-load-all-tabs-initially.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/tabstrip-load-all-tabs-initially.md b/knowledge-base/tabstrip-load-all-tabs-initially.md index c2880f782c..5052a10875 100644 --- a/knowledge-base/tabstrip-load-all-tabs-initially.md +++ b/knowledge-base/tabstrip-load-all-tabs-initially.md @@ -34,7 +34,7 @@ Even when [`PersistTabContent="true"`]({%slug tabstrip-persist-content%}), the T 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. +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).