1. Home
  2. Forum
  3. Blazor
  4. blazor grid using async doesn't always display data

blazor grid using async doesn't always display data

When populating a grid in an async function, it does not always properly load and display the data. Most of the time, it will, but sometimes it will not.

Please see attached zip with a gif demonstrating the issue and a complete Visual Studio solution including the code used to demo the issue.

Note: the code include an async delay to simulate an async call to some service to get the data.

this is with the latest version, 18.2.48

Attachment: GridBug_72e2d0a.zip

18 Replies 1 reply marked as answer
JP Jeevakanth Palaniappan Syncfusion Team August 18, 2020 12:23 PM UTC

Hi Joshua, 

Greetings from Syncfusion support. 

Query: Async data not bounded to the grid 

We have checked your query in the provided sample but unfortunately, we are unable to reproduce the reported issue from our end. Please find the video demonstration for this below, 


Regards, 
Jeevakanth SP. 


JL Joshua Lapinski August 18, 2020 11:47 PM UTC

This is still happening for us. while running locally, this happens rarely, but we deployed some changes to a test server and this issue is actually occurring more frequently there.

I fully understand that you were not able to recreate this initially, but can you please test further? Is there any other info I can provide to help you test? Does Syncfusion have any type of debug or diagnostic mode to help troubleshoot this issue?

JP Jeevakanth Palaniappan Syncfusion Team August 19, 2020 02:35 PM UTC

Hi Joshua, 

We have checked the provided sample by deploying it in a hosted link but we are unable to reproduce it in the hosted link too. Before proceeding further, we would like to know, Is there any script error/Exception thrown when the data is not rendered in the grid. Please share this detail which will be helpful for us to proceed further. 

Regards, 
Jeevakanth SP. 


JL Joshua Lapinski August 19, 2020 03:47 PM UTC

It looks like no message or exception is shown. nothing shows up in the browser's console or in Visual Studio while debugging.


As a side note, this issue seems to disappear when I add DataSourceChanged to a grid, like below. I'm not sure why, though. This gets rid of the issue, but it seems more like a hack/workaround. I don't know if there is some other issues at hand that this workaround wouldn't fix and I don't want to go add a useless/meaningless chunk of code to all of our existing grids.

SfGrid @ref="Grid" DataSource="@LibrarySurveys"
        AllowPaging="true" AllowSorting="true" AllowExcelExport="true" AllowPdfExport="true"
        DataSourceChanged="@((IEnumerable<SurveySummaryReadModel> list) => GridDataLoadedAt = DateTime.Now )"
        Toolbar="@(new List<string>() { "Search" })">







RC Roberto Conti August 20, 2020 09:35 PM UTC

Hi,I can confirm this happens to me too, with v. 18.2.54.
When i recreate the underlying List and calling StateHasChanged in an async Task, the grid is not always updated.
What Joshua suggested, using DataSourceChanged event, get it fixed, but as he says, it's just a workaround.

JE Jeremy August 23, 2020 11:21 PM UTC

Hi Guys,

have you tried to use Grid.Refresh rather than StateHasChanged? In a different forum post I was suggested to use either an observable collection or use Grid.Refresh and that seems to be working much more reliably - i never had much luck with StateHasChanged updating the grid.

Jeremy

RC Roberto Conti August 24, 2020 06:56 AM UTC

Hi Jeremy,
Grid.Refresh was the first thing I tried, but with no success.
The only thing that makes grid working properly atm is adding an handler to DataSourceChanged event.

JP Jeevakanth Palaniappan Syncfusion Team August 24, 2020 12:46 PM UTC

Hi Joshua/Roberto/Jeremy, 

We suggest you to check the reported issue by adding await Task.Yield() in the OnInitializedAsync method before binding the data to the grid. Please refer the below code snippet for your reference. 

<SfGrid> 
.. 
.. 
.. 
</SfGrid> 
 
@code{ 
 
protected override async Task OnInitializedAsync() 
{ 
    await Task.Yield(); 
    await LoadLibrarySurveyList(); // Data bounded here 
} 
 
} 

Please get back to us if you need further assistance. 

Regards, 
Jeevakanth SP. 


RC Roberto Conti August 25, 2020 05:06 PM UTC

Hi Jeevakanth,
I tried with Task.Yield but that didn't solve the problem, only subscribing to DataSourceChanged event (even with no code inside) seems to work. Please see attached video.
At first the event is subscribed, and changing year make the grid refresh correctly, then you can see that after removing the event subscription the grid doesn't always update correctly.

Attachment: GridDataSourceUpdate_81dcf0cc.zip

JE Jeremy August 26, 2020 06:27 AM UTC

Hi Roberto,

i implemented the following today which seems to be working

protected override async Task OnInitializedAsync()
{
     await ViewModel.LoadChangeLogs();
}

public async Task LoadChangeLogs()
{
      try
      {
        using (HttpClient http = new HttpClient())
        {
          string requestUri = $"{_consignmentsEndpoint}/ChangeLogs/{ConsignmentModel.Id}";
          var logs = await http.GetFromJsonAsync<List<ConsignmentLogDTO>>(requestUri);
          foreach (ConsignmentLogDTO log in logs)
          {
            ConsignmentModel.Logs.Add(log);
          }
        }
      }
      catch (Exception ex)
      {
        Console.WriteLine(ex.ToString());
      }
    }


and my ConsignmentModel.Logs property is defined as
ObservableCollection<ConsignmentLogDTO> Logs { get; set; }

this seems to be working fairly consistently for me today

And if you are not happy with having the await LoadChangeLogs, I implemented a OnPropertyChangeHandler, which calls Grid.Refresh and this also seems to work. So if you are not calling await within the OnInitializedAsync you need some mechanism to refresh the grid after the data has been returned from the API

  public async void OnPropertyChangedHandler(object sender, System.ComponentModel.PropertyChangedEventArgs e)
  {
    await InvokeAsync(() =>
    {
      if (e.PropertyName == "RefreshChangeLogs")
      {
        LogsGrid.Refresh();
      }
    });
  }

RC Roberto Conti August 26, 2020 07:55 PM UTC

Hi Jeremy,
my problems with initial data loading were resolved following some of the suggestions from this thread and others on the forums, only the issue with reloading data on demand on subsequent parameters changing, also tried with using ObservableCollection and INotifyPropertyChanged but only after using DataSourceChanged event the page started to work properly.
Thanks for helping!

JP Jeevakanth Palaniappan Syncfusion Team August 28, 2020 02:05 PM UTC

Hi Joshua/Roberto/Jeremy, 

We tried to reproduced the issue in local/hosted link but we are unable to reproduce the issue at our end. But we have already logged a usability feature task to improve the performance of Asynchronous data binding and planned to implement it in our 2020 Volume 3 main release. We suspect that the reported problem will get resolved once we implement this usability feature.  

You can track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 


Until then we suggest you to set DataSourceChanged in the grid as a workaround to resolve this issue. 

Regards, 
Jeevakanth SP. 


CH Claudio Henrique November 10, 2020 05:23 PM UTC

I have the same problem, but DataSourceChanged did not solve for me.

Is there any other solution? 

My version of Syncfusion.Blazor is 18.3.0.35.

JP Jeevakanth Palaniappan Syncfusion Team November 12, 2020 03:44 AM UTC

Hi Claudio, 

We suggest you to check the issue by adding await Task.Yield() in the OnInitializedAsync method before binding the data to the grid. Please refer the below code snippet for your reference.  

<SfGrid>  
..  
..  
..  
</SfGrid>  
  
@code{  
  
protected override async Task OnInitializedAsync()  
{  
    await Task.Yield();  
    await LoadLibrarySurveyList(); // Data bounded here  
} 
  
}  

If you still face the issue then kindly share the below details, 

  1. Share the complete grid code snippet with its model class
  2. Share your dotnet version details.
  3. Share the issue reproducing sample.

The above details will be helpful for us to validate the issue and provide you with a better solution as early as possible. 

Regards, 
Jeevakanth SP. 


Marked as answer
KR Kittisak ruangtrakul June 28, 2021 11:44 AM UTC

That worked. Thank you.


VN Vignesh Natarajan Syncfusion Team June 29, 2021 03:18 AM UTC

Hi Kittisak,  

Thanks for contacting Syncfusion support. 

We are glad to hear that you have resolved your query using our solution.  

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan 


JS John Strever January 28, 2022 08:30 PM UTC

We just ran into many days trying to narrow this down.

We finally created a page to prove it is an issue with Syncfusion and not Blazor.  
In our example, the data is rendered in a Syncufsion Data Grid, and at same time, same property is used to then dump Data in HTML to prove the data is present at time of rendering.

After runing multiple tests, then eventually the Grid will not render ( but the HTML shows the data is there , since they are both pulling from the same variable on the Blazor Page ).


Queston - Will be Fixed?
Is this scheduled to be given attention/fixed at some point?

If not - then plese update all the documentation on the Blazor Controls so we know we need to do 
use

await Task.Yeild()
and possibly
InvokeAsync(StateHasChanged())

for Syncfusion  controls on Blazor.


MS Monisha Saravanan Syncfusion Team January 31, 2022 12:14 PM UTC

Hi John, 

Sorry for the inconvenience. 

We had prepared an sample and we could not able to reproduce the reported issue. we need some more details about the requirement. So we request you to share us the below details. 

  1. Share us the complete grid rendering code snippet. You have mentioned that the data is dumped using HTML.
Kindly share the details regarding how the data is being dumped. 
 
  1. Share us the video demo showing the problem you are facing.

  1. Kindly share us the issue reproducing sample or reproduce the issue in the below provided sample.


The above requested details will be helpful for us to validate your query and to provide you with a better solution as early as possible. 

Regards, 
Monisha 



Loader.
Up arrow icon