RadzenDataList/RadzenCard error - phantom data

Radzen Studio Blazor Server
1

Hello!
i am using the nuget Radzen.Blazor library, thank you for making it!

today i ran into a strange error: RadzenCards are duplicating for no reason and appear in places where they shouldn't be. i try to explain with screenshots (ok, can only use one as per forum restrictions):

i have a html table for customers. each customer has an additional <tr> displaying a new razor component. this component shows RadzenCards in a RadzenDataList (the data object is "Scope").

image removed

when i add a new customer (= new row to the table) the radzen cards from the customer below appear in the row of the newly created customer!

debug2
debug21596×910 42 KB

i have added debug code to display the "scopes per customer" in simple plaintext, without the Radzen components. the data is correct, the code is correct. the newly created customer has no scopes, so no plaintext output is created (see yellow marking).

when i reload the page, the cards are rendered correctly. see again the yellow marking in the next picture.

image removed

the same happens when i delete the newly created customer (=delete the corresponding html row). suddenly the radzen cards disappear from the row below, but this customer has scopes so the cards should still be there.

image removed

the relevant code to create the RadzenCards is this:

 <p><em>DEBUG: Scopes for customer id: @parent?.Id </em> @foreach (Scope v in parent.Scopes) { @(v.Name + " ")  } </p>
 
 <RadzenDataList WrapItems="true" AllowPaging="true" Data="@listEntities" TItem="Scope">
     <Template Context="ent">
         <RadzenCard Style="width:200px;" @onclick="(() => EditEntity(ent))">
             <div class="row">
                 <div class="col">
                     <div>Scope:</div>
                     <b>@ent.Name</b>
                 </div>
             </div>
 
             <div class="cornerx">
                 <button type="button" class="close" aria-label="Close" @onclick="(() => DeleteEntity(ent))" @onclick:stopPropagation="true">
                     <span aria-hidden="true">&#x274C;</span>
                 </button>
             </div>
         </RadzenCard>
     </Template>
 </RadzenDataList>

am i doing something wrong with the components, or is this a bug?

2

What is the type of listEntities collection bound to DataList Data? Can you try to call Reload() for the DataList after add/remove?

3

the scopes per customer are loaded like this:

ICollection<Scope> listEntities { get; set; }
listEntities = await dataService.LoadAll(parent.Id);

the dataService contains this call to an EF MSSQL DB:

public async Task<List<Scope>> LoadAll(int customerID)
{
    return await _context.Scopes.Where(s=>s.Customerid == customerID).ToListAsync();
}

whenever a row is added or deleted to the customers table i call a load from the EF context, and "StateHasChanged()":

#region LOAD
    // load data from the datacontext
    private async Task loadData()
    {
        PaginatedList<Customer> paginatedList = await CustomerDataService.LoadAllPaginatedAndSorted(pageNumber, currentSortField, currentSortOrder);
        listEntities = paginatedList.Items;
    }
    // handler: data has changed, reload the list
    private async void OnDataChanged(AEDCallbackType aed)
    {
        switch (aed)
        {
            case AEDCallbackType.Add:
                await loadData();
                _ = ShowNotification(new NotificationMessage() { Severity = NotificationSeverity.Success, Summary = "Data Saved", Detail = "", Duration = 3000 });
                break;
            case AEDCallbackType.Edit:
                _ = ShowNotification(new NotificationMessage() { Severity = NotificationSeverity.Success, Summary = "Data Saved", Detail = "", Duration = 3000 });
                break;
            case AEDCallbackType.Delete:
                await loadData();
                _ = ShowNotification(new NotificationMessage() { Severity = NotificationSeverity.Success, Summary = "Entity Deleted", Detail = "", Duration = 3000 });
                break;
        }
        StateHasChanged();
    }
    #endregion

i can share the full project in a private message if need be.

4

Try to execute Reload() after StateHasChanged()

5

i appreciate your help, but i don't quite follow, i'm very new to blazor. Reload() is a method of what object? the RadzenDataList ? how do i access it from the customers page?

the customers table is defined in Customers.razor like this:

<tbody>
            @foreach (var ent in listEntities)
            {
                <tr @onclick="(() => ToggleCollapse(ent.Id))">
                    <td>@ent.Id</td>
                    <td>@ent.Name</td>
                    <td>@ent.Code</td>
                    <td><input type="button" class="btn btn-primary" @onclick="(() => EditEntity(ent))" value="Edit" @onclick:stopPropagation="true" /></td>
                    <td><input type="button" class="btn btn-danger" @onclick="(() => DeleteEntity(ent))" value="Delete" @onclick:stopPropagation="true" /></td>
                </tr>
                <tr class="no-hover" style="@( this.scopeVisibility.ContainsKey(ent.Id) ? "" : "display:none;")">
                    <td colspan="100">
                        <CustomerScopes parent="@(ent)"></CustomerScopes>
                    </td>
                </tr>
            }
        </tbody>

"CustomerScopes" is a blazor page component (CustomerScopes.razor). it contains the RadzenDataList as written in the first posting.

i neither have a handle/variable to customerscope-objects nor to the datalist object in each of them?

6

nevermind. i figured it out with @ref

protected RadzenDataList<Scope> ChildComponent;
public void ReloadDataTest()
{
    ChildComponent?.Reload();
}

made sure with the debugger that ChildComponent is not null and Reload() gets called. but the issue is not solved, same problem.

7

If you own a Radzen Professional subscription you can send us your project to info@radzen.com to troubleshoot the problem.

8

thanks, i am testing some of the other components and will consider the subscription, looks good so far!

in the meantime i found the fix for my issue in the MS docs, by specifying @key the ghosting of the radzen cards has disappeared.

                    <CustomerScopes @key="ent" parent="@(ent)" />

cheers!