Edit Template Validation Issue

[Ameet]

I have a grid which is defined like this -

<GridComponent id="gridTeams" dataSource={this.groupSubGroupData} ref={grid => this.gridSubGroup = grid}

                    allowPaging={true} pageSettings={{ pageSize: 30 }} allowSorting={true}

                    allowFiltering={true} filterSettings={{ type: "Menu" }}

                    sortSettings={{ field: "GroupName", direction: "Ascending" }}

                    toolbar={this.toolbarOptions} editSettings={this.editSettings}

                    actionBegin={this.actionBegin.bind(this)} actionComplete={this.actionComplete.bind(this)}>

                    <ColumnsDirective>

                        <ColumnDirective field="Id" headerText="Id" width="100" visible={false} isPrimaryKey={true} />

                        <ColumnDirective field="ParentId" headerText="ParentId" visible={false} />

                        <ColumnDirective field="GroupName" headerText="Group Name" width="200" validationRules={this.validationRules} />

                        <ColumnDirective field="GroupPurpose" headerText="Purpose" width="300" />

                        <ColumnDirective field="GradeForYouthSports" headerText="Grade (for youth sports)" visible={false} />

                        <ColumnDirective field="YouthUnderAge" headerText="Youth under age (for youth sports)" visible={false} />

                        <ColumnDirective field="PrivacySetting" headerText="Privacy Setting" foreignKeyValue="DisplayValue" foreignKeyField="Id"

                            validationRules={this.validationRules}  visible={false} />

                        <ColumnDirective field="GroupColor" headerText="Group Color" visible={false} />

                        <ColumnDirective field="CreatedBy" headerText="Created By" width="100" visible={false} />

                        <ColumnDirective field="CreatedDate" headerText="Created Date" width="100" visible={false} />

                        <ColumnDirective field="ModifiedBy" headerText="Modified By" width="100" visible={false} />

                        <ColumnDirective field="ModifiedDate" headerText="Modified Date" width="100" visible={false} />

                    </ColumnsDirective>

                    <Inject services={[Page, Sort, Filter, Edit, Toolbar]} />

                </GridComponent>

The render of edit component is defined as - 

let data = this.state;

        return (<div>

            <div className="form-row">

                <div className="form-group col-md-6 col-12">

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

                        <input ref={input => this.GroupName = input} id="GroupName" name="GroupName" type="text"

                            value={data.GroupName} onChange={this.onChange.bind(this)} />

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

                        <label className="e-float-text e-label-top">Group Name</label>

                    </div>

                </div>

                <div className="form-group col-md-6 col-12">

                    <DatePickerComponent id="TempGroupEndDate" name="TempGroupEndDate" value={data.TempGroupEndDate}

                        placeholder="End Date (for temporary groups)" floatLabelType="Always"></DatePickerComponent>

                </div>

            </div>

            <div className="form-row">

                <div className="form-group col-md-6 col-12">

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

                        <input ref={input => this.GradeForYouthSports = input} id="GradeForYouthSports" name="GradeForYouthSports" type="text"

                            value={data.GradeForYouthSports} onChange={this.onChange.bind(this)} />

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

                        <label className="e-float-text e-label-top">Grade for youth sports</label>

                    </div>

                </div>

                <div className="form-group col-md-6 col-12">

                    <NumericTextBoxComponent id="YouthUnderAge" name="YouthUnderAge" value={data.YouthUnderAge}

                        placeholder="Youth under age" floatLabelType="Auto" decimals={0} format="n0" />

                </div>

            </div>

            <div className="form-row">

                <div className="form-group col-md-6 col-12">

                    <DropDownListComponent id="PrivacySetting" name="PrivacySetting" value={data.PrivacySetting}

                        ref={(dropdownlist) => { this.privacySettingObj = dropdownlist; }}

                        dataSource={this.privacySettingData} fields={{ text: "DisplayValue", value: "Id" }}

                        placeholder="Privacy Setting" sortOrder={"Ascending"}

                        floatLabelType="Always" ></DropDownListComponent>

                </div>

                <div className="form-group col-md-6 col-12">

                    <div className="form-row">

                        <div className="form-group col-md-12 col-12">

                            Background color

                        </div>

                        <div className="form-group col-md-12 col-12">

                            <ColorPickerComponent ref={input => this.GroupColorObj = input} id="GroupColor" name="GroupColor"

                                value={data.GroupColor} onChange={this.onChange.bind(this)}></ColorPickerComponent>

                        </div>

                    </div>

                </div>

            </div>

            <div className="form-row">

                <div className="form-group col-md-12">

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

                        <input ref={input => this.GroupName = input} id="GroupPurpose" name="GroupPurpose" type="text"

                            value={data.GroupPurpose} onChange={this.onChange.bind(this)} />

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

                        <label className="e-float-text e-label-top">Group Purpose</label>

                    </div>

                </div>

            </div>

        </div>);

The required validation works for GroupName but not for Privacy Settings.

Any help is greatly appreciated.

Thank You,

Regards,

Ameet

[Manivel Sellamuthu]

Hi Ameet, 

Greetings from Syncfusion support. 

From your query we can understand that you are using the Dialog template for the Grid. If we have used additional fields that are not present in the column model(or invisible), then we need to add the validation rules to the actionComplete event. We have discussed about this in the below documentation.Please refer the below documentation for more information. 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/edit/#adding-validation-rules-for-custom-editors 

Please let us know if you need further assistance. 

Regards, 

Manivel