Data Not Showing in Grid

[Brian Collings]

Hi

I'm new to Blazor and trying to write a Blazor WebAssembly app in .NET 6. I've attached the code of one of my pages.

The app reads in the data that populates the grid but it isn't displayed when the page is displayed. I've added a button that refreshes the grid. I have to press it twice to display the data. Then everything works perfectly.

If I use WebAPI to bind to the grid the data is displayed when the page is displayed, but the paging and search options don't work.

I cannot find a way to make everything work when the page is first displayed.

Can you help please?

Regards

Brian

Attachment: CostCentres_1324cbb6.zip

[Monisha Saravanan]

Hi Brian,

Greetings from Syncfusion

Query: “The app reads in the data that populates the grid but it isn't displayed when the page is displayed. I've added a button that refreshes the grid. I have to press it twice to display the data. Then everything works perfectly.”

We have prepared an simple sample as per your shared reference. We suspect that the Data is not fetched properly from the service so the reported issue occurs. Kindly ensure once whether the Data is fetched properly and update the below details it will be very helpful for us to validate the reported issue at our end.

1. Share us the video demonstration of the issue.
2. If possible kindly share us the simple issue reproduceable 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.

@using Syncfusion.Blazor.Grids

@inject WeatherForecastService ForecastService

@using SfGridPager.Data

 

 

 

    <SfGrid DataSource="@forecasts" EnableVirtualization="true" Height="400" RowHeight="38">

      

    </SfGrid>

 

  

 

 

@code {

    private WeatherForecast[] forecasts;

 

    protected override async Task OnInitializedAsync()

    {

        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);

    }

}

 

Query: “If I use WebAPI to bind to the grid the data is displayed when the page is displayed, but the paging and search options don't work.”

Data operations and CRUD operations need to be handled on the controller part for the WebApi Adaptor.

Please let us know if you have any concerns.

Regards,

Monisha

[Brian Collings]

Hi Monisha

Thanks for your reply. I've attached some screen shots and two razor files.

I have two razor files, CostCentres and Funding, which both have problems with a datagrid. The problems in one aren't the same as the problems in the other. I'm trying to find a way to merge these files so that all the problems go away.

There are seven screen shots as follows:

1. This shows the CostCentres when the page opens. There are no records showing in the datagrid.
2. This shows CostCentres after clicking on the Refresh button twice (clicking once has no effect). This button refreshes the datagrid. After two clicks all the records can be seen. 
3. Clicking on Page 2  shows the second page
4. Entering a search string and pressing Enter works perfectly. The Add and Edit on the toolbar don't work but everything else on the toolbar works.
5. This shows the Funding when the page opens. There are records showing in the datagrid. Although paging is allowed and page size is set to 10 all  the records are displayed.
6. Clicking on Page 2 makes no difference.
7. Entering a search string and pressing Enter doesn't work. Everything else on the toolbar works - Add, Edit, Exports and Print.

You said that Data operations and CRUD operations need to be handled on the controller part for the WebApi Adaptor. I'm not sure how to do that. Can you give me an example please.

The razor pages for CostCentres and Funding are attached.

Let me know if you need anything else.

Thanks

Brian

Attachment: Documents_ffa26f81.zip

[Monisha Saravanan]

Hi Brian,

We have attached an working sample of CRUD with WebApi. Kindly check the attached sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebAPISample142443723-2024490030.zip

Also in your shared code( Fundings.razor) we could wee that you have used both the DataSource property and SfDataManager in your code. We suggest you to use any one of the above at your end either Datasource or SfDataManger.

Also after fetching the datasource try to assign datasource once again to the Grid DataSource property.

protected  async void InitData()

    {

        var response = await client.GetAsync($"api/CostCentre");

        response.EnsureSuccessStatusCode();

        CostCenters = await response.Content.ReadFromJsonAsync<List<CostCentre>>();

        //Assign datasource once again  here

        DefaultGrid.Datasource = CostCenters;

    }

Please let us know if you have any concerns.

Regards,

Monisha

[Brian Collings]

Hi Monisha

Thanks for your help.

I made changes and my code is working as I want it to work.

Thank You

Brian

[Monisha Saravanan]

Hi Brian,

Welcome. We are glad to hear that the reported query has been resolved. Kindly get back to us if you have further queries. As always we will be happy to assist you.

Regards,

Monisha