SFGrid - model not getting updated while editing

[Christopher Brandsdal]

I have a sfgrid that can add owners to the db. I'm using template editing and have a form there. I have a requirement that when the model.NationalityId changes, the other components in the form that depends on this property should update. But this does not seem to work. How can I make sure that when the model.NationalityId changes, both the ZipCodeTextBox gets its NationalityId property updated?

Here is the code for my edit dialog.

  <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams">
                <HeaderTemplate>
                    @{
                        var model = (context as OwnerVM);
                        if (model.Id == null)
                        {
                            <span>@Localizer.GetString(() => WebLocalizerResources.OwnersPage.AddDialogHeader)</span>
                        }
                        else
                        {
                            <span>@model.Name</span>
                        }
                    }
                </HeaderTemplate>
                <Template>
                    @{
                        var model = (context as OwnerVM);
                    }
                    <MudGrid Class="mt-2" Spacing="2">
                        <MudItem xs="6">
                            <NationalityDropDownList @bind-Value="@(model.NationalityId)" ValidationMessage="@(() => model.NationalityId)" Id="NationalityId" Readonly="false" @bind-Value:event="ValueChanged"></NationalityDropDownList>
                        </MudItem>
                        <MudItem xs="6">
                            <SfTextBox ID="VisitAddress" @bind-Value="@(model.VisitAddress)"  FloatLabelType="FloatLabelType.Always" Placeholder="@Localizer.GetString(() => WebLocalizerResources.Fields.OwnerVisitAddress)"></SfTextBox>
                        </MudItem>
                        <MudItem xs="6">
                            <SfTextBox ID="Name" @bind-Value="@(model.Name)" FloatLabelType="FloatLabelType.Always" Placeholder="@Localizer.GetString(() => WebLocalizerResources.Fields.OwnerName)"></SfTextBox>
                        </MudItem>
                        <MudItem xs="6">
                            <ZipCodeTextBox @bind-Value="@(model.VisitZipCode)" Id="VisitZipCode" NationalityId="@(model.NationalityId)" Placeholder="@Localizer.GetString(() => WebLocalizerResources.Fields.OwnerVisitZipCode)" @bind-Value:event="ValueChanged"></ZipCodeTextBox>
                        </MudItem>
                        <MudItem xs="6">
                            <SfTextBox ID="Email" @bind-Value="@(model.Email)" FloatLabelType="FloatLabelType.Always" Placeholder="@Localizer.GetString(() => WebLocalizerResources.Fields.OwnerEmail)"></SfTextBox>
                        </MudItem>
                        <MudItem xs="6">
                            <SfTextBox ID="ContactName" @bind-Value="@(model.ContactName)" FloatLabelType="FloatLabelType.Always" Placeholder="@Localizer.GetString(() => WebLocalizerResources.Fields.OwnerContactName)"></SfTextBox>
                        </MudItem>
                        <MudItem xs="6">
                            <SfTextBox ID="Address" @bind-Value="@(model.Address)" FloatLabelType="FloatLabelType.Always" Placeholder="@Localizer.GetString(() => WebLocalizerResources.Fields.OwnerAddress)"></SfTextBox>
                        </MudItem>
                        <MudItem xs="6">
                            <SfTextBox ID="ContactEmail" @bind-Value="@(model.ContactEmail)" FloatLabelType="FloatLabelType.Always" Placeholder="@Localizer.GetString(() => WebLocalizerResources.Fields.OwnerContactEmail)"></SfTextBox>
                        </MudItem>
                        <MudItem xs="6">
                            <ZipCodeTextBox @bind-Value="@(model.ZipCode)" Id="ZipCode" NationalityId="@(model.NationalityId)" Placeholder="@Localizer.GetString(() => WebLocalizerResources.Fields.OwnerZipCode)" @bind-Value:event="ValueChanged"></ZipCodeTextBox>
                        </MudItem>
                        <MudItem xs="6">
                            <SfTextBox ID="ContactPhoneNumber" @bind-Value="@(model.ContactPhoneNumber)" FloatLabelType="FloatLabelType.Always" Placeholder="@Localizer.GetString(() => WebLocalizerResources.Fields.OwnerContactPhoneNumber)"></SfTextBox>
                        </MudItem>
                        <MudItem xs="6">
                            <SfTextBox ID="PhoneNumber" @bind-Value="@(model.PhoneNumber)" FloatLabelType="FloatLabelType.Always" Placeholder="@Localizer.GetString(() => WebLocalizerResources.Fields.OwnerPhoneNumber)"></SfTextBox>
                        </MudItem>
                        <MudItem xs="12">
                            <NotesRichTextEditor @bind-Value="@(model.Notes)" Id="Notes" Placeholder="@Localizer.GetString(() => WebLocalizerResources.OwnersPage.NoteEditPlaceholder)" LabelText="@Localizer.GetString(() => WebLocalizerResources.Fields.OwnerNotes)" @bind-Value:event="ValueChanged"></NotesRichTextEditor>
                        </MudItem>
                    </MudGrid>
                </Template>
            </GridEditSettings>

[Sarveswaran Palani]

Hi Christoper,

From your query, we suspect that you’re facing issue when updating the model class value while changing others. We suggest you to call PreventRender within the MudGrid change event to overcome the reported issue at our end. Kindly refer the attached documentation link for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance#avoid-unnecessary-component-renders-after-grid-events

Regards,

Sarvesh