Boolean field does not trigger update within DataForm

[Christopher]

Please consider the following form:

            <SfDataForm ID="EditParcelForm" Model="@Parcel" @ref="EditForm" ColumnCount="2" OnUpdate="CompareToOriginal" EnableFloatingLabel="true" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit" ColumnSpacing="2rem" ValidationDisplayMode="FormValidationDisplay.Tooltip">
                <FormValidator>
                    <DataAnnotationsValidator></DataAnnotationsValidator>
                </FormValidator>
                <FormItems>
                    <FormItem Field="@nameof(Parcel.AddressLine1)"></FormItem>
                    <FormItem Field="@nameof(Parcel.PhaseId)">
                        <Template>
                            <label class="e-form-label">Phase</label>
                            <SfDropDownList TItem="Phase" DataSource="Phases" TValue="int" @bind-Value="Parcel.Phase.Id">
                                <DropDownListFieldSettings Value="Id" Text="Label"></DropDownListFieldSettings>
                            </SfDropDownList>
                        </Template>
                    </FormItem>
                    <FormItem Field="@nameof(Parcel.AddressLine2)"></FormItem>
                    <FormItem Field="@nameof(Parcel.Block)"></FormItem>
                    <FormItem Field="@nameof(Parcel.City)"></FormItem>
                    <FormItem Field="@nameof(Parcel.Lot)"></FormItem>
                    <FormItem Field="@nameof(Parcel.Province)"></FormItem>
                    <FormItem Field="@nameof(Parcel.Latitude)"></FormItem>
                    <FormItem Field="@nameof(Parcel.PostalCode)"></FormItem>
                    <FormItem Field="@nameof(Parcel.Longitude)"></FormItem>
                    <FormItem Field="@nameof(Parcel.HasCarriageSuite)"></FormItem>
                </FormItems>
                <FormButtons></FormButtons>
            </SfDataForm>

The 'CompareToOriginal' function checks the current version of the item against the unchanged version in the database, and sets a flag to enable or disable the save button (not included in this forum post).  I have two problems:

1) I do not see a way to trigger the OnUpdate function from keyup or keydown - the user has to tab to another field / change focus for the  OnUpdate function to fire.  Is there a way to have this more responsive to user input?

2) The OnUpdate function does not fire when the checkbox field changes (in the above, it's Parcel.HasCarriageSuite).  The UI correctly displays a checkbox, and correctly saves the value to the database, but the OnUpdate function doesn't react to it at all. 

Am I doing something incorrectly, or is there a bug?

Thankyou,

Chri

[UdhayaKumar Duraisamy]

Query 1: I do not see a way to trigger the OnUpdate function from keyup or keydown - the user has to tab to another field / change focus for the  OnUpdate function to fire.  Is there a way to have this more responsive to user input?

 

The Data Form creates controls like TextBox and Textarea based on the class field. By default, the input component's ValidateOnInput property is set to false, meaning validation only triggers when you move focus away from the component. If you want validation to trigger on every key press, set the ValidateOnInput property to true for the applicable components and use the Template to render them. Please refer to the code snippet and sample below for more information.

 

<SfDataForm ID="EditParcelForm" Model="@parcel" @ref="EditForm" ColumnCount="2" OnUpdate="CompareToOriginal" EnableFloatingLabel="true" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit" ColumnSpacing="2rem" ValidationDisplayMode="FormValidationDisplay.Tooltip">

    <FormValidator>

        <ObjectGraphDataAnnotationsValidator></ObjectGraphDataAnnotationsValidator>

    </FormValidator>

    <FormItems>

        <FormItem Field="@nameof(Parcel.AddressLine1)"></FormItem>

        <FormItem Field="Phase.Id">

            <Template>

                <label class="e-form-label">Phase</label>

                <SfDropDownList TItem="Phase" DataSource="Phases" TValue="int" @bind-Value="@(parcel.Phase.Id)">

                    <DropDownListFieldSettings Value="Id" Text="Label"></DropDownListFieldSettings>

                </SfDropDownList>

            </Template>

        </FormItem>

        <FormItem Field="AddressLine2">

            <Template>

                <SfTextArea ValidateOnInput="true" @bind-Value="@(parcel.AddressLine2)" FloatLabelType='@FloatLabelType.Auto' Placeholder='ValidateOnInput as true'></SfTextArea>

            </Template>

        </FormItem>

    </FormItems>

    <FormButtons></FormButtons>

</SfDataForm>

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionBlazorWebApp-DataForm2072009882

Query 2: The OnUpdate function does not fire when the checkbox field changes (in the above, it's Parcel.HasCarriageSuite).  The UI correctly displays a checkbox, and correctly saves the value to the database, but the OnUpdate function doesn't react to it at all.

 

We have considered the reported issue "The OnUpdate function does not trigger when the checkbox field changes" as a bug from our end, and the fix for the issue will be included in any one of our upcoming releases.

 

You can now track the status of the feedback through the below link,

https://www.syncfusion.com/feedback/59341

 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

 

[Christopher]

Thank you for the first workaround, hopefully in the future, there will be a way to set the ValidateOnInput property on the SfForm element, instead of needing to manually create a template for each field.

I look forward to the bug fix!

Thanks again,

Christopher

[UdhayaKumar Duraisamy]

We will check the possibility of setting the `ValidateOnInput` property on the Data Form component instead of setting it for the applicable components individually using templates in one of our upcoming future releases.