Validation bug in DataGrid when using Grouping in conjunction with Insert/Update Edits within edit dialog

[Don Griffes]

Synopsis:

If I declare that a column (I'm using a string column but perhaps other primitives also have this bug) where I have required an input using validationRules="@(new {required = true})", and use THAT field as a grouped field, then the validation rule for that specified field no longer validates as being a required field.

Here's the code for my sample Grid: (Please note: I've commented out the e-grid-groupsettings element to demonstrate the bug... uncomment it and then notice that the "required field" tool tip no longer renders for the "grouped by" field)... but it does render correctly, if grouping of that column isn't declared.

In the sample code below, the grouped column is the CustomerId string column.

    <ejs-grid id="DataGrid" dataSource="ViewBag.dataSource"

              allowPaging="true"

              allowSorting="true"

              allowResizing="true"

              allowFiltering="true"

              allowGrouping="true"

              toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel", "Search"})">

        <e-data-manager url="@Url.Action("UrlDatasource", "DataGrid")" insertUrl="/DataGrid/Insert" updateUrl="/DataGrid/Update" removeUrl="/DataGrid/Delete" adaptor="UrlAdaptor"></e-data-manager>

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

        <e-grid-filterSettings type="Menu"></e-grid-filterSettings>

        <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>

        @*<e-grid-groupsettings showDropArea="false" columns="@(new string[] {"CustomerId"})"></e-grid-groupsettings>*@

        <e-grid-columns>

            <e-grid-column field="OrderId" validationRules="@(new {required = true})" isPrimaryKey="true" headerText="Order Id" minWidth="120" width="200" maxWidth="300" textAlign="Right"></e-grid-column>

            <e-grid-column field="CustomerId" validationRules="@(new {required = true})" headerText="Customer Id" minWidth="8" width="200"></e-grid-column>

            <e-grid-column field="OrderDate" validationRules="@(new {required = true})" headerText=" Order Date" editType="datepickeredit" textAlign="Right" format="yMd" minWidth="8" width="200"></e-grid-column>

            <e-grid-column field="Freight" headerText="Freight" validationRules="@(new {required = true})" allowResizing="true" editType="numericedit" textAlign="Right" format="C2" width="150" minWidth="8"></e-grid-column>

            <e-grid-column field="ShipName" validationRules="@(new {required = true})" headerText="Ship Name" minWidth="8" width="300"></e-grid-column>

            <e-grid-column field="ShippedDate" headerText="Shipped Date" textAlign="Right" format="yMd"

                           allowResizing="true"

                           width="200"></e-grid-column>

            <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" minWidth="8" width="200"></e-grid-column>

            <e-grid-column field="Verified" displayAsCheckBox="true" type="boolean" headerText="Verified" editType="booleanedit" minWidth="8" width="200"></e-grid-column>

        </e-grid-columns>

        <e-grid-aggregates>

            <e-grid-aggregate>

                <e-aggregate-columns>

                    <e-aggregate-column field="Freight" type="Sum" groupFooterTemplate="Total units: ${Sum}"></e-aggregate-column>

                    <e-aggregate-column field="Verified" type="Truecount" groupFooterTemplate="Verified: ${Truecount}"></e-aggregate-column>

                    <e-aggregate-column field="Freight" type="Max" groupCaptionTemplate="Maximum: ${Max}"></e-aggregate-column>

                </e-aggregate-columns>

            </e-grid-aggregate>

        </e-grid-aggregates>

    </ejs-grid>

Please advise if there is a work-around.

Thanks.

[Prasanna Kumar Viswanathan]

Hi Don, 

  

Sorry for the late reply. 

  

Based on your shared information we have confirmed that your reported scenario is an issue from our side and logged a bug for same. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming weekly patch release scheduled on 30^th June 2021. 

  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

  

Feedback Link:  https://www.syncfusion.com/feedback/26206/validation-rules-for-grouped-field-column-are-not-working 

  

Until that time we appreciate your patience and  suggest you to define validation rules for required field when args.requestType as add or beginEdit in actionComplete event like below instead of defining validation in column level. 

  

 function actionComplete (args) { 

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

                // Define validation rules using addRules 

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

            } 

        } 

  

Screenshot: 

  

 

  

Reference Sample : https://stackblitz.com/edit/e8mw1p-t7jyfj?file=index.js 

  

Please get back to us, if you need any further assistance. 

  

Regards, 

Prasanna Kumar N.S.V