blazor grid using async doesn't always display data

[Joshua Lapinski]

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

[Jeevakanth Palaniappan]

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, 

Video Demonstration - https://www.syncfusion.com/downloads/support/directtrac/general/ze/AsyncData57483312  

Regards, 

Jeevakanth SP. 

[Joshua Lapinski]

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?

[Jeevakanth Palaniappan]

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. 

[Joshua Lapinski]

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

[Roberto Conti]

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.

[Jeremy]

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

[Roberto Conti]

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.

[Jeevakanth Palaniappan]

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. 

[Roberto Conti]

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

[Jeremy]

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

      }

    });

  }

[Roberto Conti]

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!

[Jeevakanth Palaniappan]

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. 

Feedback Link - https://www.syncfusion.com/feedback/15401/need-to-improve-the-asynchronous-data-handling 

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

Regards, 

Jeevakanth SP. 

[Claudio Henrique]

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.

[Jeevakanth Palaniappan]

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. 

[Kittisak ruangtrakul]

That worked. Thank you.

[Vignesh Natarajan]

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 

[John Strever]

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.

[Monisha Saravanan]

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. 

 

2. Share us the video demo showing the problem you are facing.

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

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11767961820.zip 

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