Field Update on Blur

Radzen.Blazor Components
1

Good morning,

I'm attempting to update one field based on another in a Radzen form. However, the @onblur event isn't working as expected, and I need the field to update only when it loses focus. Any help would be appreciated.

Here is my code:

@page "/edit-detail"

<PageTitle>Edit Detail</PageTitle>

    <RadzenColumn SizeMD=12>
        <RadzenAlert Shade="Shade.Lighter" Variant="Variant.Flat" Size="AlertSize.Small" AlertStyle="AlertStyle.Danger" Visible="@errorVisible">Cannot save Detail</RadzenAlert>
    <RadzenTemplateForm TItem="OverTheCounterSales.Models.OTCSProdData.Detail" Data="@detail" Visible="@(detail != null)" Submit="@FormSubmit">
          <RadzenStack>
            <RadzenFormField Text="Number Apps" Variant="Variant.Filled">
                  <ChildContent>
                    <RadzenNumeric style="display: block; width: 100%" @bind-Value="@detail.NumberApps" Name="NumberApps" />
              </ChildContent>
            </RadzenFormField>
            <RadzenFormField Text="Cash Amount" Variant="Variant.Filled">
                  <ChildContent>
                    <RadzenNumeric style="display: block; width: 100%" @bind-Value="@detail.CashAmount" Name="CashAmount" Format="F2" @onblur="() => UpdateTotalEntered(detail)"/>
              </ChildContent>
            </RadzenFormField>
            <RadzenFormField Text="Check Amount" Variant="Variant.Filled">
                  <ChildContent>
                    <RadzenNumeric style="display: block; width: 100%" @bind-Value="@detail.CheckAmount" Name="CheckAmount" Format="F2" />
              </ChildContent>
            </RadzenFormField>
            <RadzenFormField Text="Credit Amount" Variant="Variant.Filled">
                  <ChildContent>
                    <RadzenNumeric style="display: block; width: 100%" @bind-Value="@detail.CreditAmount" Name="CreditAmount" Format="F2" />
              </ChildContent>
            </RadzenFormField>
            <RadzenFormField Text="Total From Register" Variant="Variant.Filled">
                  <ChildContent>
                    <RadzenNumeric style="display: block; width: 100%" @bind-Value="@detail.TotalEntered" Name="TotalEntered" Format="F2" />
              </ChildContent>
            </RadzenFormField>
          </RadzenStack>
          <RadzenStack style="margin-top:1rem;" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.End" Gap="0.5rem">
                    <RadzenButton ButtonStyle="ButtonStyle.Primary" ButtonType="ButtonType.Submit" Icon="save" Text="Save" Variant="Variant.Flat" />
                    <RadzenButton ButtonStyle="ButtonStyle.Light" Text="Cancel" Variant="Variant.Flat" Click="@CancelButtonClick"  />
          </RadzenStack>
        </RadzenTemplateForm>
    </RadzenColumn>
2

Hi @djgaddis26,

The blur event doesn't bubble indeed. Try using focusout instead.

3

Hi @korchev,

Thank you so much for your help! I managed to solve it. Just a heads-up for the future: make sure to use @bind-value:after in tandem with @bind-value.

 <RadzenFormField Text="Cash Amount" Variant="Variant.Filled">
     <ChildContent>
         <RadzenNumeric style="display: block; width: 100%" @bind-Value="detail.CashAmount" @bind-Value:after="UpdateTotalEntered" Name="CashAmount" Format="F2" />
     </ChildContent>
 </RadzenFormField>