We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. React - EJ 2
  4. Validate FK Column with custom dialog template

Validate FK Column with custom dialog template

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

9 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team June 18, 2019 12:50 PM UTC

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.  


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

Regards, 
Thavasianand S. 


MA Matteo June 18, 2019 12:55 PM UTC

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.

TS Thavasianand Sankaranarayanan Syncfusion Team June 19, 2019 11:47 AM UTC

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> 



Regards, 
Thavasianand S. 


MA Matteo replied to Thavasianand Sankaranarayanan June 19, 2019 12:27 PM UTC

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> 



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.

PS Pavithra Subramaniyam Syncfusion Team June 20, 2019 08:40 AM UTC

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> 
 
 
 
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. 


MA Matteo June 21, 2019 07:42 AM UTC

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

TS Thavasianand Sankaranarayanan Syncfusion Team June 24, 2019 10:28 AM UTC

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(); 
                    } 
                } 
            } 

   
Regards, 
Thavasianand S. 


MA Matteo June 25, 2019 08:34 AM UTC

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

TS Thavasianand Sankaranarayanan Syncfusion Team June 26, 2019 02:05 PM UTC

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. 
 

  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. 


Loader.
Up arrow icon