Blazor/RadzenGrid Reload() does not work

Radzen Studio Blazor WebAssembly
1

Hello
i'm currently working on a sample project with your component
I use EF Core, i can display my table and edit the records inline

My page is like this

                    <RadzenGridColumn TItem="Payment" Context="sampleBlazorModelsSampleOrder" Bubble="false" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="100px">
                        <Template Context="payment">
                            <RadzenButton Icon="edit" Size="ButtonSize.Small" Click="@(args => EditRow(payment))">
                            </RadzenButton>
                        </Template>
                        <EditTemplate Context="payment">
                            <RadzenButton Icon="save" Size="ButtonSize.Small" Click="@(args => SaveRow(payment))">
                            </RadzenButton>
                            <RadzenButton Icon="cancel" Size="ButtonSize.Small" ButtonStyle="ButtonStyle.Secondary" Click="@((args) => CancelEdit(payment))">
                            </RadzenButton>
                        </EditTemplate>
                    </RadzenGridColumn>
                </Columns>
            </RadzenGrid>
        </div>

My code is here
@code {
RadzenGrid paymentsGrid;
Payment payment;
Payment paymentList;

protected override async Task OnInitializedAsync()
{
    //Thread.Sleep(5000);
    Console.WriteLine("OnInitializedAsync");
    paymentList = await Http.GetFromJsonAsync<Payment[]>("/api/Payment/Index");
    payment = paymentList.FirstOrDefault();

}

void Cancel()
{
    //
}

void EditRow(Payment payment)
{
    paymentsGrid.EditRow(payment);
}

void SaveRow(Payment payment)
{
    paymentsGrid.UpdateRow(payment);
}


void CancelEdit(Payment payment)
{
    paymentsGrid.CancelEditRow(payment);
}
void InsertRow()
{
    paymentsGrid.InsertRow(new Payment());
}
void OnUpdateRow(Payment payment)
{
    UpdatePayment(payment);
}
void OnCreateRow(Payment payment)
{
    AddPayment(payment);
   
    StateHasChanged();
    Task.Delay(10000);
    paymentsGrid.Reload();

}

protected async Task UpdatePayment(Payment payment)
{
    await Http.PutAsJsonAsync("/api/Payment/Edit", payment);
}

private async Task AddPayment(Payment payment)
{
    await Http.PostAsJsonAsync("/api/Payment/Create", payment);
}

}

I tried what is suggested here : DataGrid refresh on Reload/LoadData
But it doesn ot seem to work

I assume i load data in OnInitializedAsync()
I call my function to add a payment AddPayment and then i should refresh the grid

If i do not call .Reload() my grid looks ok but my PaymentId which is autoincremented in the database is 0 in the grid. I cannot edit it right away as Id is the key. I need to press F5 !
If i call reload() the grid is reset as the state it was before I add the record. SO the reocrd is not displayed

I'm pretty sure that i missed smth simple but i cannot get it. Could you help please ?

image
image2033×739 47 KB

Upfront thanks

2

Please format your code! It's impossible to read what are the DataGrid settings. You can use markdown code blocks for that.

I assume that the grid is bound to this variable initially:

To the get your new data you need to execute the same code - Reload() method of the DataGrid will rebuild the grid UI according to provided value in Data property.

1 Like
3

Thank you for your support
I tried to execute this after adding the payment

protected async Task GetAllPaymentDetails()
{
paymentList = await Http.GetFromJsonAsync<Payment>("/api/Payment/Index");
payment = paymentList.FirstOrDefault();
paymentsGrid.Reload();
}

My grid is defined like this

<RadzenGrid @ref="paymentsGrid"

The adding method is

private async Task AddPayment(Payment payment)
{
await Http.PostAsJsonAsync("/api/Payment/Create", payment);
await GetAllPaymentDetails();
}

When the reload is done my grid does not contain the lastest record. It is in the DB though. If i create a button Reload

<RadzenButton Icon="add_circle_outline" style="margin-bottom: 10px" Text="Reload" Click="@(args => ReloadPayment())" />

That calls this

void ReloadPayment()
{
paymentsGrid.Reload();
}

It works well but this is not automatic

4

It looks like i am in the wrong category. My app is is web assembly not server side
I dunno if this has an impact
Edit : I moved it to the right category

5

I'll restate what I've set in my previous reply:

6

Thx for the support my issue was not linked to your component
It is was the way of using async that was the root cause
Sorry for the inconvenience and thank you again

To make sure it helps someone else some day
I had to change

void OnCreateRow(Payment payment)

into

protected async Task OnCreateRow(Payment payment)

1 Like