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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Validate FK Column with custom dialog template

Thread ID:

Created:

Updated:

Platform:

Replies:

145320 Jun 17,2019 02:54 PM UTC Jun 26,2019 02:05 PM UTC React - EJ 2 9
loading
Tags: Grid
Matteo
Asked On June 17, 2019 02:54 PM UTC

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 [Syncfusion]
Replied On 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. 


Matteo
Replied On 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.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


Matteo
Replied On 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.

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Matteo
Replied On 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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


Matteo
Replied On 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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon