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

Tabs not refreshing

Thread ID:

Created:

Updated:

Platform:

Replies:

146516 Aug 6,2019 09:30 PM UTC Aug 20,2019 03:35 PM UTC Blazor 5
loading
Tags: Tabs
Gill
Asked On August 6, 2019 09:30 PM UTC

Hi,

I have the following collection of tabs I'm using:

<EjsTab @ref="IncidentReportTabStrip">
    <TabItems>
        <TabItem Header="@GeneralHeader">
            <ContentTemplate>
                <IncidentGeneralInfo OnNext=@(() => MoveToTab("DateTime"))></IncidentGeneralInfo>
            </ContentTemplate>
        </TabItem>
        <TabItem Header="@DateHeader">
            <ContentTemplate>
                <DateAndTimeInfo OnNext=@(() => MoveToTab("Course"))></DateAndTimeInfo>
            </ContentTemplate>
        </TabItem>
       
    </TabItems>
</EjsTab>
Each of the tabs contains a component in the template. Here's the IncidentGeneralInfo component:
@if (IsLoading)
{
    <Loading></Loading>
}
else
{
    <EditForm Model="@IncidentStateViewModel.IncidentGeneralInfoViewModel" OnValidSubmit="@OnSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class="container">
            <div class="form-group row">
                <label class="col-md-6 control-label">Incident event</label>
                <div class="col-md-12">
                    <EjsTextBox @bind-Value="@IncidentStateViewModel.IncidentGeneralInfoViewModel.IncidentEvent" Enabled="@IncidentStateViewModel.CanEdit"></EjsTextBox>
                    <ValidationMessage For="@(() => IncidentStateViewModel.IncidentGeneralInfoViewModel.IncidentEvent)"></ValidationMessage>
                </div>
            </div>

     
        </div>
    </EditForm>
}

In the class I use for the code, I have the following set:

public IncidentGeneralInfoBase()
        {
            IsLoading = true;
            DefaultLkpIncidentCategoryDto = new LkpIncidentCategoryDto() { Id = null, IncidentCategory = "--Select Incident category--" };
            DefaultLkpIncidentTypeDto = new LkpIncidentTypeDto() { Id = null, IncidentType = "--Select Incident type--" };
            DefaultLkpSeverityLevelDto = new LkpSeverityLevelDto() { Id = null, SeverityType = "--Select Severity--" };
        }

        protected override async Task OnInitAsync()
        {
            Logger.LogTrace("Init async");

            await IncidentGeneralInfoDataService.LoadLkpIncidentCategoryDtos();
            await IncidentGeneralInfoDataService.LoadLkpIncidentTypeDtos();
            await IncidentGeneralInfoDataService.LoadLkpSeverityLevelDtos();

            IsLoading = false;

            Logger.LogTrace("Init async end");
            StateHasChanged();

        }

The problem I have is the following:
When I run the page, the IsLoading will get set to false in OnInitAsync. However, in the UI, the EditForm part isn't showing after the IsLoading value is updated. In fact, whatever content I place in the else clause here doesn't become visible. It only happens when there are awaitable calls (that load data from service classes over HTTP) before it. If I comment them out, the form shows nicely after the value is updated in OnInitAsync.

Can you take a look to see what I'm doing wrong here?

Thanks,

Gill


Arun Palaniyandi [Syncfusion]
Replied On August 7, 2019 11:24 AM UTC

Hi Gill, 
  
Thanks for contacting Syncfusion support. 
  
We have tried to replicate this issue based on your shared code snippets, but unfortunately we can't replicate this issue. After the 3rd awaits only, the IsLoading gets false and then the EditForm page gets loaded inside the Tab. This case works fine for the Tab component. Since the components within ContentTemplate render after the tab is rendered, there is no problem with the tab side. 
  
We request you to share the details below to further validate from our side. 
  • What are your exact Syncfusion and .NET core preview version?
  • Check whether you faced any console errors. If so please share the details.
  • Share us the issue reproducing image or video.
  • If possible, use our sample to replicate your issue and then revert back to us
  
We have now prepared a sample and find the same below. 
  
Kindly let us know if you need further assistance.  
  
Regards, 
Arun P. 
 


Gill
Replied On August 11, 2019 02:02 PM UTC

Hi,

Sorry for the delay and thank you for taking a look.

I've updated the sample you had prepared so it now also includes the issue.

I have changed the GetForecastAsync so it runs code that runs asynchronously:

public async Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
        {
            return await Task.Run(() =>
            {
                Thread.Sleep(2000);
                //Thread.Sleep(20);
                var rng = new Random();

                var a = Enumerable.Range(1, 5).Select(index => new WeatherForecast
                {
                    Date = startDate.AddDays(index),
                    TemperatureC = rng.Next(-20, 55),
                    Summary = Summaries[rng.Next(Summaries.Length)]
                }).ToArray();
                return a;
            });
        }
Notice the Thread.Sleep is now set to 2000ms. 
When I now run the app, the result for the IncidentGeneralInfo tab is that you first see the Loading and then you get (after 3 x 2000ms since we called it 3 times) a blank view. That's the same issue as I have in my application. When we set the Thread.Sleep to 20ms, things work correctly (because that runs synchronously I think).

I have attached the sample again with the updated code for you to take a look. I've included in the ZIP also the screenshots.

Again, thanks in advance for the help.



Attachment: Sample_4ff351.zip

Vinitha Devi Murugan [Syncfusion]
Replied On August 13, 2019 01:19 PM UTC

Hi Gill, 
 
Thanks for your update.  
 
We could reproduce the reported issue at our end. We are validating with high priority and will provide the further details with timeline for the fix on August 14, 2019.  

We would appreciate your valuable patience until then. 
 
Regards, 
M.Vinitha devi. 


Gill
Replied On August 19, 2019 11:19 AM UTC

Hi, Is there an update for this issue already?

Nevitha Ravi [Syncfusion]
Replied On August 20, 2019 03:35 PM UTC

Hi Gill, 
 
Sorry for the delay post. 
 
We have validated the template content update issue in asynchronous call. Currently, we don’t have that support to handle asynchronous call. So, we have logged it as feature request and it will be rolled out on September Mid Bi-Weekly release. 
 
 
Regards, 
Nevitha 


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