1. Home
  2. Forum
  3. Blazor
  4. Lose information in the tab wizard by clicking the previous or next button

Lose information in the tab wizard by clicking the previous or next button

Lose information in the tab wizard by clicking the previous or next button in your Example:
Please note the attached video

Attachment: TabSubmit_e53026cc.zip

9 Replies
AK Alagumeena Kalaiselvan Syncfusion Team January 10, 2020 09:51 AM UTC

Hi Ebi, 

sorry for the inconvenience caused. 
  
We could replicate the reported problem at our end. We modified the sample without losing tab’s information. The sample can be downloaded from the following link for your reference. 
  

We will correct our UG documentation on or before the end of January, 2020. 

Regards 
Alagumeena.K 


ET ebi torabi January 10, 2020 12:07 PM UTC

Hi Alagumeena.K 
Thank you. But this does not seem to be the main solution. I have a real project and I want to find a better solution to this problem because I use two bindings.

AK Alagumeena Kalaiselvan Syncfusion Team January 14, 2020 03:20 PM UTC

Hi Ebi, 
  
Thanks for your update! 
  
The Tab component have three possible ways to load it’s content as like below 
  
  1. Load Tab content dynamically  at the time of switching it’s header
  2. Load All tab contents at initial load
  3. Load Tab content when required but keep content once it is rendered
  
In the above listed ways, the first way  as “Load Tab content dynamically  at the time of switching it’s header” is already available behavior in our Tab and the second way as “Load All tab contents at initial load” will be included for our Vol 1, SP1 release . Also, we currently looking the feasible ways to achieve the third way as “Load Tab content when required but keep content once it is rendered”  which will be expected to roll-out for our upcoming Vol 1, main release.   
  
We would appreciate your patience until then. 
  
Kindly let us know, if you need further assistance. 
  
Regards 
Alagumeena.K

ET ebi torabi January 14, 2020 04:55 PM UTC

Hi Alagumeena.K
how to Load Tab content dynamically  at the time of switching it’s header
Please give an example if possible

AK Alagumeena Kalaiselvan Syncfusion Team January 15, 2020 02:41 PM UTC

Hi Ebi, 
  
Thanks for your update! 
  
You can load tab content’s dynamically by defining the content using ContentTemplate. Refer below code for that 
  
@using Syncfusion.EJ2.Blazor.Navigations 
  
<EjsTab> 
    <TabItems> 
        <TabItem> 
            <ChildContent> 
                <TabHeader Text="Header1"></TabHeader> 
            </ChildContent> 
            <ContentTemplate><Counter></Counter></ContentTemplate> 
        </TabItem> 
        <TabItem> 
            <ChildContent> 
                <TabHeader Text="Header1"></TabHeader> 
            </ChildContent> 
            <ContentTemplate><FetchData></FetchData></ContentTemplate> 
        </TabItem> 
    </TabItems> 
</EjsTab> 
  
  
In above sample, we have defined the “razor” pages as a tab’s content and contents could be loaded at the time of switching it’s corresponding header alone. You can also download this sample from the following link 
  
  
Kindly try out this sample and let us know, If you need further assistance. 
  
Regards 
Alagumeena.K 


ET ebi torabi January 15, 2020 04:27 PM UTC

Alagumeena.K .
Unfortunately, your example is still in trouble and the information is lost. Please report if this component is in trouble. Let's build a wizard another way.

Attachment: TabSubmit1_ed13711e.zip

BP Balaji Paramesvaran Syncfusion Team January 17, 2020 01:24 PM UTC

Hi Ebi, 
  
Sorry for the inconvenience caused. 
  
The loading of tab content dynamically with state maintenance is achieved by adding a class CounterState.cs 
  
using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;namespace BlazorStateManagement{    public class CounterState    {        public int CurrentCount { get; set; }    }}
  
By opening the Startup.cs file, register the created class at ConfigureServices method 
  
public void ConfigureServices(IServiceCollection services) 
        { 
            …. 
            services.AddScoped<CounterState>(); 
        }
  
Inject the class in the Counter.razor file and update the CurrentCount to maintain the state. 
  
@inject CounterState CounterState  <h1>Counter</h1> <p>Current count: @CounterState.CurrentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code {     public void IncrementCount()    {        // ** Present State        int CurrentCount = CounterState.CurrentCount;        CurrentCount++;        // Set Current count on the Present State object        CounterState.CurrentCount = CurrentCount;    }}
  
Please refer the below sample link, 
Kindly try the above sample, if you have any concerns please revert us back for further assistance. 
Regards, 
Balaji

ET ebi torabi January 17, 2020 03:22 PM UTC

Hi Balaji. 
Thank you so much for your example.
 But I have 21 TabItems Should I do it for all of them?
 Don't you think this is a bug?
If you think this is a bug, when will this bug be fixed?

AK Alagumeena Kalaiselvan Syncfusion Team January 20, 2020 12:16 PM UTC

Hi Ebi, 
 
Thanks for your update! 
 
The suggested solution is not suitable when more number of tabs placed. Already, we are working on this issue and it will be overcome through the following feature request as "load all the tab content initially". The solution will be available on 2020 ,Vol 4 patch release which is planned to roll-out at the end of January. 
 
Regards 
Alagumeena.K 


Loader.
Up arrow icon