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. Image for the cookie policy date
close icon

Tabs not refreshing


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

<EjsTab @ref="IncidentReportTabStrip">
        <TabItem Header="@GeneralHeader">
                <IncidentGeneralInfo OnNext=@(() => MoveToTab("DateTime"))></IncidentGeneralInfo>
        <TabItem Header="@DateHeader">
                <DateAndTimeInfo OnNext=@(() => MoveToTab("Course"))></DateAndTimeInfo>
Each of the tabs contains a component in the template. Here's the IncidentGeneralInfo component:
@if (IsLoading)
    <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>


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");


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?



5 Replies

AP Arun Palaniyandi Syncfusion Team 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.  
Arun P. 

GI Gill August 11, 2019 02:02 PM UTC


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(() =>
                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)]
                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

VD Vinitha Devi Murugan Syncfusion Team 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. 
M.Vinitha devi. 

GI Gill August 19, 2019 11:19 AM UTC

Hi, Is there an update for this issue already?

NR Nevitha Ravi Syncfusion Team 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. 

Live Chat Icon For mobile
Up arrow icon