DxFormLayout.ItemUpdating Event

Occurs before a layout item(s) is updated.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<KeyValuePair<string, object>> ItemUpdating { get; set; }

Parameters

Type	Description
KeyValuePair<String, Object>	A key/value pairs that specify layout items.

Remarks

Use the ItemUpdating event to handle each item update when the Form Layout is bound to an external data source.

<DxFormLayout Data="@editFormData"
    ItemUpdating="@((pair) => OnItemUpdating(pair.Key, pair.Value))">
    <DxFormLayoutItem Field="@nameof(FormDataItem.Name)" .../>
    <DxFormLayoutItem Field="@nameof(FormDataItem.Birthday)" .../>
    <DxFormLayoutItem Field="@nameof(FormDataItem.Worked)" .../>
    <DxFormLayoutItem Field="@nameof(FormDataItem.Position)" .../>
</DxFormLayout>

@code {
    @* ... *@
    void OnItemUpdating(string fieldName, object newValue) {
        if (fieldName == nameof(FormDataItem.Name)) {
            editFormData.Name = newValue.ToString();
        } else if (fieldName == nameof(FormDataItem.Birthday)) {
            editFormData.Birthday = (DateTime)newValue;
        } else if (fieldName == nameof(FormDataItem.Worked)) {
            editFormData.Worked = (int)newValue;
        } else if (fieldName == nameof(FormDataItem.Position)) {
            editFormData.Position = newValue.ToString();
        }
        @* ... *@
    }
}

Run Demo: Form Layout - Bind to Data

Bind to Data

When controls inside DxFormLayoutItem use @bind-* syntax (@bind-Value, @bind-Text, and similar), Blazor assigns ValueChanged/TextChanged event handlers automatically. Because these handlers are already assigned, DxFormLayout does not attach its own OnChanged handler, so ItemUpdating is not raised.

As a workaround, handle the control change event manually and call ValueEditContext.OnChanged. The following snippet uses the item template context parameter:

<DxFormLayoutItem Field="@nameof(FormDataItem.Name)"
                  CaptionPosition="CaptionPosition.Horizontal"
                  Caption="Name:">
    <DxTextBox Text="@((string)((ValueEditContext)context).Value)"
               TextExpression="@(() => FormDataItem.Name)"
               TextChanged="@((string value) => ((ValueEditContext)context).OnChanged(value))">
    </DxTextBox>
</DxFormLayoutItem>