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

[ebi torabi]

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

https://ej2.syncfusion.com/blazor/documentation/tab/how-to/create-wizard-using-tab/?no-cache=1

Please note the attached video

Attachment: TabSubmit_e53026cc.zip

[Alagumeena Kalaiselvan]

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. 

  

https://www.syncfusion.com/downloads/support/forum/150525/ze/TabWizard-394250985  

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

Regards 

Alagumeena.K 

[ebi torabi]

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.

[Alagumeena Kalaiselvan]

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

[ebi torabi]

Hi Alagumeena.K

how to Load Tab content dynamically  at the time of switching it’s header

Please give an example if possible

[Alagumeena Kalaiselvan]

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 

  

https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabComponent577660814    

  

Kindly try out this sample and let us know, If you need further assistance. 

  

Regards 

Alagumeena.K 

[ebi torabi]

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

[Balaji Paramesvaran]

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, 

https://www.syncfusion.com/downloads/support/forum/150525/ze/TabStateManagement-383148494  

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 

Regards, 

Balaji

[ebi torabi]

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?

[Alagumeena Kalaiselvan]

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