The first in error field does not show the error message

[Ali]

I am using ASP.NET Core Datagrid with a dialog template to add/edit. For some reason, the first field in error does not display the error message.

Here is a sequence of pictures to show the problem.

WarehouseName, and State are required fields. If both are left blank, WarehouseName does not show the error.

WarehouseName, ZipCode, and State are required fields. If only ZipCode is left blank, it does not show the error when pressing the save button.

[Rajapandiyan Settu]

Hi Ali, 

 

Thanks for contacting Syncfusion support. 

 

By using column Validation support, we can validate the columns while saving a record in EJ2 Grid. 

 

Column validation allows you to validate the edited or added row data and it displays errors for invalid fields before saving data. The Grid uses Form Validator component for column validation. You can set validation rules by defining the ValidationRules. Refer to the below documentation and code example for more information. 

 

Column-validation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/validation/#column-validation 

API: https://ej2.syncfusion.com/documentation/api/grid/column/#validationrules  

 

 

_DialogAddPartial partial 

 

        <div class="form-row"> 

            <div class="form-group col-md-6"> 

                <div class="e-float-input e-control-wrapper"> 

                    @Html.TextBox("OrderID") 

                    <span class="e-float-line"></span> 

                    @Html.Label("OrderID", "Order ID", new { @class = "e-float-text e-label-top" }) 

                </div> 

            </div> 

            <div class="form-group col-md-6"> 

                <div class="e-float-input e-control-wrapper"> 

                    <ejs-textbox id="CustomerID" placeholder="CustomerID" floatLabelType="Auto"></ejs-textbox> 

                </div> 

            </div> 

        </div> 

 

Index.cshtml 

 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required= true })" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" validationRules="@(new { required= true })" width="120"></e-grid-column> 

 

 

In the Dialog editTemplate, we can add the new field editors in the dialog, which are not present in the column model. If you have used additional fields that are not present in the column model, then add the validation rules to that filed in the ActionComplete event of beginEdit and add. Refer to the below code example and documentation for more information. 

 

Validation rule for custom editors: https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/template-editing/#adding-validation-rules-for-custom-editors 

 

 

DialogAddPartial partial 

 

            <div class="form-group col-md-6"> 

                <div class="e-float-input e-control-wrapper"> 

                    @Html.TextBox("QuestionTypeId") 

                    <span class="e-float-line"></span> 

                     // QuestionTypeId field is not present in the Grid column model              

                    @Html.Label("QuestionTypeId", "Question Type Id", new { @class = "e-float-text e-label-top" }) 

                </div> 

            </div> 

 

Index.cshtml 

 

    function ActionComplete(args) { 

        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { 

             // add the validation rule to QuestionTypeId field 

            args.form.ej2_instances[0].addRules('QuestionTypeId', { required: true });       } 

         } 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_3_dialogtemp_validation362300452.zip 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S