Validate FK Column with custom dialog template

[Matteo]

I am working with a grid with custom add/edit template, trying to validate a Foreign Key column.

I can't validate that column with validationRules.

Example attached.

Matteo

Attachment: Assembly_f1c6404a.7z

[Thavasianand Sankaranarayanan]

Hi Matteo, 

 

Greetings from Syncfusion support. 

We have validated the provided code example and we suspect that you have customized validation rule in foreignKey Column(“FrontEndCategoryId”) it is cause of the defect. In the below Documentation to know about the existing validation rules  while we editing the grid.  

Help Documentation:  https://ej2.syncfusion.com/documentation/form-validator/validation-rules/?no-cache=1 

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

Regards, 

Thavasianand S. 

[Matteo]

I created the custom validation to try and debug the problem.

Even changing the line to:

<ColumnDirective field='FrontEndCategoryId' headerText="Category" width='250px' allowFiltering={false} dataSource={this.FrontEndCatData} foreignKeyValue='ResourcesItalianText' validationRules={{ required: true }} />

it does not matter, the validation is still missing.

[Thavasianand Sankaranarayanan]

Hi Matteo, 

As per your query we have modified teh sample with custom validation on dialog template editing in EJ2 Grid. please refer the below code example and sample for more information. 

[index.js] 

export class DialogTemplate extends SampleBase { 

            constructor() { 

            super(...arguments); 

            .     .     .     . 

            this.customValidate = { required: [this.customFn.bind(this), "Please select ShipCountry"] }; 

        } 

 

        customFn(args) { 

            return args['value'] == "" ? false : true; 

        };  

 

 

    <GridComponent dataSource={orderData} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} pageSettings={this.pageSettings} actionComplete={this.actionComplete.bind(this)}> 

        <ColumnsDirective> 

            .   .    .    . 

            <ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' width='170'></ColumnDirective> 

            <ColumnDirective field='ShipCountry' headerText='Ship Country' validationRules={this.customValidate} width='150'></ColumnDirective> 

        </ColumnsDirective> 

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

    </GridComponent> 

Sample link: https://stackblitz.com/edit/react-xrezkc?file=index.js 

Regards, 

Thavasianand S. 

[Matteo]

Hi Matteo, 

As per your query we have modified teh sample with custom validation on dialog template editing in EJ2 Grid. please refer the below code example and sample for more information. 

[index.js] 

export class DialogTemplate extends SampleBase { 

            constructor() { 

            super(...arguments); 

            .     .     .     . 

            this.customValidate = { required: [this.customFn.bind(this), "Please select ShipCountry"] }; 

        } 

 

        customFn(args) { 

            return args['value'] == "" ? false : true; 

        };  

 

 

    <GridComponent dataSource={orderData} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} pageSettings={this.pageSettings} actionComplete={this.actionComplete.bind(this)}> 

        <ColumnsDirective> 

            .   .    .    . 

            <ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' width='170'></ColumnDirective> 

            <ColumnDirective field='ShipCountry' headerText='Ship Country' validationRules={this.customValidate} width='150'></ColumnDirective> 

        </ColumnsDirective> 

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

    </GridComponent> 

Sample link: https://stackblitz.com/edit/react-xrezkc?file=index.js 

Regards, 

Thavasianand S. 

I am sorry but you may have misunderstood my question.

As per title, the validation does NOT work with Foreign Key Columns, your example does not include a FK column.

[Pavithra Subramaniyam]

Hi Matteo, 

 

We have validated the your query and we are tried to reproduce the reported defect in our end but it is unsuccessful. We have applied validationRules on foreignKey column with dialogtemplate editing it is correctly working the validation on ForeignKey column. Please refer the below code example, sample and video demonstrate the reported defect with EJ2 Grid performance. 

 

[index.js] 

 

<GridComponent dataSource={this.data} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} pageSettings={this.pageSettings} actionComplete={this.actionComplete.bind(this)}> 

        <ColumnsDirective> 

            .   .  . 

            <ColumnDirective field='ShipCountry' headerText='Ship Country' foreignKeyField="ShipCountry" foreignKeyValue="City" dataSource={this.fkDataSource} validationRules={{required:true}} width='150'></ColumnDirective> 

        </ColumnsDirective> 

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

    </GridComponent> 

 

Sample link: https://stackblitz.com/edit/react-xrezkc-pnafzp?file=index.js 

 

Video: http://www.syncfusion.com/downloads/support/directtrac/general/ze/k1OyMLYkRB-2066339402.zip 

 

If you are still facing the face the same issue, could you please provide more information that will be helpful for us to validate further at our end. 

 

• Share ej2.min script file version.
• Share the Stack trace  if any script error
• Please try to reproduce the issue in the above sample if possible

 

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

 

Regards, 

Pavithra S. 

[Matteo]

Ok the validation does in fact work, but it only triggers on submit, it does not trigger "onLostFocus" like the TextBoxes.

Both in your example and in my code.

Is this behavior intentional?

Matteo

[Thavasianand Sankaranarayanan]

Hi Matteo, 

 

As per your query, we have created a sample with validation happens while editing input element focusout in the dialog editing in EJ2 Grid. Please refer the below code example to more information. 

[index.js] 

  actionComplete(args) { 

   

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

                    args.form.addEventListener("focusout", function (e) { 

                        this.ej2_instances[0].validate(); //validate required input elements 

                    }); 

                    if (Browser.isDevice) { 

                        args.dialog.height = window.innerHeight - 90 + 'px'; 

                        args.dialog.dataBind(); 

                    } 

                } 

            } 

Sample link: https://stackblitz.com/edit/react-xrezkc-2w12vb?file=index.js 

   

Regards, 

Thavasianand S. 

[Matteo]

The fix does work somehow.

But it brakes the form, all the error tooltip get misplaced, as per attached image.

Greetings.

Matteo

Attachment: Capture_89c00b01.7z

[Thavasianand Sankaranarayanan]

Hi Matteo, 

We have validated your query provided information and we are unable to reproduce the reported defect on our end. Could you please provide more information or below details it will helpful for us to validate further at our end. 

 

We have prepared a sample in the following link. 

 

Link: https://stackblitz.com/edit/react-xrezkc-2w12vb?file=index.js  

1. Share full code sample with reported issue existing
2. Share issue video demonstrate.
3. Ensure the EJ2 script and DLL version.

Regards, 

Thavasianand S.