We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Selecting new tab item removes old tab item content from DOM

Thread ID:

Created:

Updated:

Platform:

Replies:

150892 Jan 23,2020 12:05 PM UTC Apr 2,2020 10:37 AM UTC Blazor 2
loading
Tags: Tabs
Mr Andrey Voronov
Asked On January 23, 2020 12:05 PM UTC


I created two tabs in EjsTab: Tab1 and Tab2

Place <input /> in Tab1, enter some text

Switch to Tab2, and back to Tab1

Result: input text lost.

Selecting new tab should add "display:none" style to previously selected tab instead of recreating DOM


Alagumeena Kalaiselvan [Syncfusion]
Replied On January 24, 2020 12:41 PM UTC

Hi Andrey, 

Thanks for contacting Syncfusion support! 

We have validated your reported scenario as “Removed the old tab item content from DOM when selecting new tab item”. The Blazor Tabs load its content freshly on navigating tab instead of display as none. 

So, we suggest you to follow below steps to keep the state of tab content. 

Step1:   Add a class in project to maintain a state. For example we added a class called “CounterState.cs” using below code 

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Threading.Tasks; 
namespace TabComponent 
{ 
    public class CounterState 
    { 
        public int CurrentCount { get; set; } 
    } 
} 

Step2:   Need to register the above class by opening the Startup.cs file and adding the following code to the end of the ConfigureServices method as like below: 
 
            
            // ** SESSION STATE 
            // Singleton usually means for all users,  
            // where as scoped means for the current unit-of-work 
            services.AddScoped<CounterState>(); 
 

Step3:  To consume that class, need to inject the class name in “Index.razor” file and refer the below code for that 

@inject CounterState CounterState 
 
<EjsTab> 
    --------- 
    ---------- 
   <ContentTemplate> 
       <div class="active"> 
          <input value="@CounterState.CurrentCount" />  // Get input value 
           <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> 
        </div> 
   </ContentTemplate> 
   ----------- 
   ----------- 
</EjsTab> 
 
@code{ 
    public void IncrementCount() 
    { 
        int CurrentCount = CounterState.CurrentCount; // set session state 
        CurrentCount++; 
        CounterState.CurrentCount = CurrentCount; // set current count on session state object 
 
    } 
} 

So, Please try out this sample and We hope that the old value could be persisted whenever you selecting new tab item. You can also download this sample from the following link 

Also, we have already logged improvement as "Load tab content when required but keep the content once it's rendered" to maintain the state in Tabs which will be available on 2020, Vol 1 main release. You can track the following link for that 

Kindly Let us know, if you need further assistance. 

Regards 
Alagumeena.K 
 


Alagumeena Kalaiselvan [Syncfusion]
Replied On April 2, 2020 10:37 AM UTC

Hi Andrey, 
  
We are glad that we have rolled out the beta release(v18.1.36-beta) of Volume 1 main release and the feature request has implemented and included in this release. Kindly upgrade the package version to latest. 
 
 
Please let us know if you need any further assistance. ­­ 
 
Regards 
Alagumeena.K 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon