Entire grid changes when a single cell is edited.

[Dennis Imbro]

When I edit a cell in a data grid, the entire grid changes.  Each row in the grid is replaced by the row of the cell that was edited.  What could be causing that effect?

@using static PorfolioAnalysis.Components.Class_files.Portfolio

<div class="row p-2 thistable">
    <SfGrid DataSource="@PortfolioAccounts" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowPaging="false" Width="100%">
        <GridEditSettings AllowAdding="true"
                          AllowDeleting="true"
                          AllowEditing="true"
                          ShowAddNewRow="false">
        </GridEditSettings>
        <GridColumns>
            <GridColumn Field=@nameof(PortfolioAccount.Id) HeaderText="ID" TextAlign="TextAlign.Center" Width="25" IsPrimaryKey="true"></GridColumn>
            <GridColumn Field=@nameof(PortfolioAccount.Owner) HeaderText="Owner" TextAlign="TextAlign.Center" Width="25" AllowEditing="true"></GridColumn>
            <GridColumn Field=@nameof(PortfolioAccount.AccountName) HeaderText="Account Name" TextAlign="TextAlign.Center" Width="50" AllowEditing="true"></GridColumn>
            <GridColumn Field=@nameof(PortfolioAccount.Balance) HeaderText="Balance" TextAlign="TextAlign.Center" Width="50" Format="C0" AllowEditing="true" ></GridColumn>
            <GridColumn Field=@nameof(PortfolioAccount.Taxed) HeaderText="Taxable" TextAlign="TextAlign.Center" Width="50" AllowEditing="true"></GridColumn>
            <GridColumn Field=@nameof(PortfolioAccount.AccountType) HeaderText="Type" TextAlign="TextAlign.Center" Width="50" AllowEditing="true"></GridColumn>
            <GridColumn Field=@nameof(PortfolioAccount.LastUpdate) HeaderText="Updated" TextAlign="TextAlign.Center" Width="50" AllowEditing="true"></GridColumn>
            <GridColumn Field=@nameof(PortfolioAccount.AccountNumber) HeaderText="Acct #" TextAlign="TextAlign.Center" Width="50" AllowEditing="true"></GridColumn>
        </GridColumns>
    </SfGrid>
    <br />
    <div class="d-flex flex-row m-2 align-content-center">
        <h5 class="align-content-center">Click on Update before saving.</h5>
        <button class="btn btn-primary ms-2" @onclick="@(()=> TableChanged.InvokeAsync(PortfolioAccounts))"> Save</button>
    </div>
</div>

@code {
    [Parameter]
    public List<PortfolioAccount> PortfolioAccounts { get; set; } = new List<PortfolioAccount>();
    [Parameter]
    public EventCallback<List<PortfolioAccount>> TableChanged { get; set; }
}

[Sanjay Kumar Suresh]

Hi Dennis Imbro,

We have bound the data source to the provided code snippet and validated it from our end. The mentioned issue could not be reproduced.

However, we suspect that the PrimaryKey column values might not be unique in your case. If the values in the primary key column are not unique, it can cause changes to affect multiple records unexpectedly.

We kindly request you to ensure that unique values are bound to the PrimaryKey column and check if the issue persists.

Sample Ensured from our End:

https://blazorplayground.syncfusion.com/embed/LjroDpLWhHQrBGuj?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

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

1. Please provide a simple issue replicating sample or try to modify the above-mentioned sample.
2. Share us the video demonstration of the reported issue.

The above requested detail will be very helpful for us to validate the reported issue at our end.

Regards,

Sanjay Kumar Suresh

[Dennis Imbro]

Thanks for the quick reply. Non-unique primary keys was indeed the problem.

[Sanjay Kumar Suresh]

Hi Dennis Imbro,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards,

Sanjay Kumar Suresh