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

ebi torabi

Asked On January 9, 2020 08:33 PM UTC

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

Reply | Reply with quote

Alagumeena Kalaiselvan [Syncfusion]

Replied On 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.

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

Reply | Reply with quote

ebi torabi

Replied On 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.

Reply | Reply with quote

Alagumeena Kalaiselvan [Syncfusion]

Replied On 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

Load Tab content dynamically at the time of switching it’s header
Load All tab contents at initial load
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

Reply | Reply with quote

ebi torabi

Replied On 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

Reply | Reply with quote

Alagumeena Kalaiselvan [Syncfusion]

Replied On 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

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

Reply | Reply with quote

ebi torabi

Replied On 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

Reply | Reply with quote

Balaji Paramesvaran [Syncfusion]

Replied On 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,

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

Reply | Reply with quote

ebi torabi

Replied On 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?

Reply | Reply with quote

Alagumeena Kalaiselvan [Syncfusion]

Replied On 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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
150525	Jan 9,2020 08:33 PM UTC	Jan 20,2020 12:16 PM UTC	Blazor	9

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US