This is a migrated thread and some comments may be shown as answers.

Grid entering two times in same read method call

6 Answers 1402 Views

Grid

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

answered on 05 Jun 2020, 07:19 AM

Hi Jason,

In a server-side Blazor app this behavior is expected - the pre-rendering actually initializes all components twice - once on the server for the pre-rendering, and once the client-side portion of the app spins up. This is the case with all components, not just the grid. For example, if you fetch data in the OnInitialized event, it will be called twice too. For example, if you make a GET for the FetchData page from the default template, and modify it as follow,s you will find that statement twice in the console:

    protected override async Task OnInitializedAsync()
    {
        Console.WriteLine("fetching data");
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }

This behavior is expected and valid - for proper pre-rendering the components need to initialize and render, and for the grid that also means getting data.

If you want to reduce the calls, you must use some business logic to do that, for example, flag raised in the OnAfterRender event so you can call the OnRead handler yourself only then (a basic example of storing the grid request is available here: https://docs.telerik.com/blazor-ui/components/grid/manual-operations#cache-data-request). Here's another I made for you that uses a flag from OnAfterRender:

@using Telerik.DataSource

<TelerikGrid Data=@GridData TotalCount=@Total
             Pageable=true PageSize=15
             OnRead=@ReadItems>
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Id) Title="ID" />
        <GridColumn Field=@nameof(Employee.Name) Title="Name" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<Employee> GridData { get; set; }
    public int Total { get; set; } = 0;
    bool hasComponentRenderedOnce { get; set; }
    DataSourceRequest CurrentRequest { get; set; }

    protected async Task ReadItems(GridReadEventArgs args)
    {
        CurrentRequest = args.Request;
        if (hasComponentRenderedOnce)
        {
            await FetchData();
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            hasComponentRenderedOnce = true;
            FetchData();
        }
    }

    async Task FetchData()
    {
        if (CurrentRequest == null)
        {
            return;
        }

        Console.WriteLine("ReadItems"); // fetch actual data here and populate Total and GridData
    }


    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

Paul Wood

commented on 09 Nov 2021, 02:21 AM

If you don't want to use OnRead and are using the simpler

protected override async Task OnInitializedAsync()
{
	await LoadData();
}

are there any issues with just replacing the above with the following instead to avoid the two calls to the database?:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	if (firstRender)
	{
		await LoadData();
		StateHasChanged();
	}

Marin Bratanov

commented on 09 Nov 2021, 07:17 PM

That's the typical approach people tend to take in such cases.

I would only suggest you call
await InvokeAsync(StateHasChanged);
so that you are sure it executes in the main thread.