Grid not showing data on browser refresh

[Sandip Mane]

Hello,

I am using SfGrid with Custom adaptor. Grid shows data only for the first time in the browser, but not when the same page is refreshed or even when opened in the new browser tab. I only get 'No records to display' with grid headers. Also, noticed that data is loaded correctly, and if I select any of the grid header, which triggers sort action, data is shown as expected. 

While troubleshooting, noticed that on first page load OnInitializedAsync() method is getting called twice, followed by CustomAdaptor Read() method. But, on page refresh,  OnInitializedAsync() method is called once and not followed by  CustomAdaptor Read() method. 

Please see code snippets below:

<SfGrid TValue="ExpandoObject" ID="Grid" Height="100%" AllowSorting="true" AllowPaging="true" AllowFiltering="true" AllowSelection="true" EnableStickyHeader="true" Toolbar="@(new List<string>() { "Search" })">

<SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

<GridPageSettings PageSize="45"></GridPageSettings>

<GridEvents TValue="ExpandoObject" RowSelecting="RowSelecting"></GridEvents>

<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>

<GridColumns>

<GridColumn Field="Fund" HeaderText="Fund" TextAlign="TextAlign.Left" IsPrimaryKey="false" ValidationRules="@(new ValidationRules{ Required=true, Number=false})" Width="120" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

<GridColumn Field="Type" HeaderText="Type" TextAlign="TextAlign.Center" ValidationRules="@(new ValidationRules { Required=true, Number=false})" Width="70" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

<GridColumn Field="NAV" HeaderText="NAV" TextAlign="TextAlign.Center" Format="N4" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="70" AllowEditing="false" AllowSorting="false" AllowFiltering="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

</GridColumns>

</SfGrid>

protected override async Task OnInitializedAsync()

    {

        dataTable = await GetData();

        DataSource = ToQueryableCollection(dataTable); // Convert DataTable to IQueryable ExpandoObject list

    }

public async Task<DataTable> GetData()

    {

        DataTable dt = new DataTable();

        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Fund", typeof(string)),

                                                new DataColumn("Type", typeof(string)),

                                                new DataColumn("NAV",typeof(float)),

        });

        // Call the API and populate the DataTable

        var client = new HttpClient();

var response = await client.GetAsync("http://localhost:8000/perf/e");

if (response.IsSuccessStatusCode)

{

var contentStream = await response.Content.ReadAsStreamAsync();

var jsonResponse = await JsonSerializer.DeserializeAsync<Dictionary<string, object>>(contentStream);

var returnsobj = jsonResponse["returns"] as JsonElement?;

if (returnsobj.HasValue && returnsobj.Value.ValueKind == JsonValueKind.Array)

{

var returnsList = JsonSerializer.Deserialize<List<Dictionary<string, object>>>(returnsobj.Value.GetRawText());

if (returnsList != null)

{

foreach (var item in returnsList)

{

DataRow row = dt.NewRow();

row["Fund"] = item["scheme_name"];

row["Type"] = item["scheme_subtype"];

row["NAV"] = ((JsonElement)item["day_nav"]).GetSingle();

dt.Rows.Add(row);

}

}

}

}

        return dt;

    }

[Naveen Palanivel]

Hi Sandip Mane,

Greetings from Syncfusion,

We reviewed your query, and it seems that the CustomAdaptor Read() method is not being called on page refresh, causing the grid to not display data. However, we tested this scenario using the latest version (28.2.6) but were unable to reproduce the issue on our end.

If the reported issue still reproduced, then kindly share the below details to validate further at our end.

1. Share us the video demonstration of the issue with elaborately, it will be more useful to us.
2. Confirm if the issue still occurs in the latest Syncfusion version (28.2.6). If you are using a different version, please mention the exact version.
3. Share us a simple issue replicating sample or try to modify the above-mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Naveen Palanivel.

Attachment: BlazorServernet9_Read_4cba8516.zip

[Sandip Mane]

Hi,

I am using .Net 8 and Syncfusion 28.2.3.  It looks like I get this issue only when I try to get data from HTTP API using async method as 

var response = await client.GetAsync("http://localhost:8000/...");

or 

var response = await client.GetFromJsonAsync<List<Object>>("https://jsonplaceholder.typicode.com/posts")

But, if I just hardcode response in the GetDataAsync() method which in turn gets called from 

OnInitializedAsync() then it works.

Also, observed that if I just copy my my entire .razor page into your provided sample solution file, then too it works.

One difference in your sample solution and my solution is that I am using Blazor web app with Interactivity type as "Auto" with per page/component location. I think your solution uses  Interactivity type as "Server". Not sure if interactivity type is causing this issue.

Thanks.

[Sandip Mane]

Hi,

On further investigation, I found that issue is when I use  Blazor web app with Interactivity type as "Auto" with per page/component location - @rendermode InteractiveAuto

Please refer the attached sample zip file that contains the reproduction of the issue. There is a gridtest1 (Grid Test1 menu item) page that shows data as expected which uses  @rendermode InteractiveServer and  gridtest2 (Grid Test2 menu item) page that shows does not show data as expected which uses  @rendermode InteractiveAuto.

Please help.

Attachment: SyncfusionBlazorApp3_d6e6c1fe.zip

[Sandip Mane]

any update please? previous message contains required files with code simulating the problem.

[Naveen Palanivel]

Hi Sandip Mane,

We have checked your query, and it seems that the custom adaptor works well in the server-side (InteractiveServer) mode, but the issue occurs in the client-side (InteractiveAuto) mode. This happens because the server and client have different compilation processes. In some cases, performing synchronous operations inside asynchronous methods can lead to unexpected behavior in WebAssembly (client-side) execution. To resolve this issue, we have moved the custom adaptor to a separate class to ensure proper execution. Please refer the modified sample for more information

Regards,
Naveen.

Attachment: SyncfusionBlazorApp3_56c6a69d.zip

[Sandip Mane]

It works. Thanks.

[Naveen Palanivel]

Hi Sandip,

Welcome.

Kindly get back to us if you have further queries. As always we will be assist you.

Regards,
Naveen