How to achieve context-aware row validation?

[Ignacy Mielniczek]

HI,

I am using a Grid with edit mode, just like in this example:

I need to have a validation where I can check if any other row has the selected value. So I don't want to have two rows with the same Customer ID. If user attempts to select a duplicate value, I want a validation error tooltip under the edited field (just like in the screenshot)

The problem is the validationRules object runs a validation function without any context. So I do not have the access to my grid in the validation function, and I cannot chceck other rows. How can I achieve this?

Thank you

[Pavithra Subramaniyam]

Hi Ignacy Mielniczek,

Greetings from Syncfusion support.

Based on your requirement, you need to validate whether the Name column value is a duplicate value when adding/editing a record in the Grid. If so, you can achieve your requirement by using custom validation.

Custom validation: https://ej2.syncfusion.com/angular/documentation/grid/editing/validation/#custom-validation

In the custom validation function, we checked whether the CustomerID value is already present in the grid dataSource or not. Based on the result we return the Boolean value. You can also use your custom logic to find the duplicate values in the “namecustomFn”. Please refer to the below code example and sample for more information.

 

[app.component.html]

 

 <e-column field='CustomerID' headerText=Customer ID'  [validationRules]='customeridrules'></e-column>

 

 

[app.component.ts]

 

  public ngOnInit(): void {

    this.customeridrules = {

      required: true,

      number: true,

      minLength: [this.namecustomFn, 'Name already exists!'],

    };

  }

  namecustomFn(args) {

      var grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0];

      // check whether the CustomerID is already present in the datasource or not

      var x = new DataManager(grid.dataSource).executeLocal(new Query().where('CustomerID', 'equal', args.value));

      // return the value based on the result

      if (x.length > 0) {

        return false;

      } else {

        return true;

      }

  }

 

Sample: https://stackblitz.com/edit/angular-rnsqjs-5ce3yu?file=app.component.ts

Please get back to us if you need further assistance with this.

Regards,

Pavithra S

[Ignacy Mielniczek]

Thank you for your reply. 

Can you tell me additional two things regarding the validation function?

1) how to check a value of a different column from the edited row inside this validation function?

2) is it possible to give a different validation message based on that value?

Thanks

[Pavithra Subramaniyam]

Hi Ignacy Mielniczek,

Query#1: how to check a value of a different column from the edited row inside this validation function?

You can get the other field values by getting the “input” field from the edit form. Please refer to the below code example and the sample link for more information.

  namecustomFn(args) {

    console.log(grid.element.querySelector('#GridFreight').value); // here "Grid" is Grid element id, "Freight" - required field name

    .  .  .

  }

 

https://stackblitz.com/edit/angular-rnsqjs-kycnuo?file=app.component.ts,app.component.html

Query#2: is it possible to give a different validation message based on that value?

You can achieve your requirement by setting the “rules” property of the grid “formObj” inside the custom validation function.

  namecustomFn(args) {

    var grid = (document.getElementsByClassName('e-grid')[0] as any)

      .ej2_instances[0];

    grid.editModule.formObj.rules.CustomerID.minLength[1] =

      'new Message Value is already present';

    .  .  .

  }

 

Please get back to us if you need further assistance.

Regards,

Pavithra S

[Kristin Gore]

Thank you so much for the details here. I would like to know more about it. :)

[Pavithra Subramaniyam]

Hi Kristin Gore,

Please refer to the below documentation for further information about custom validation and form validator control.

https://ej2.syncfusion.com/angular/documentation/grid/editing/validation/#custom-validation

https://ej2.syncfusion.com/documentation/form-validator/validation-rules/

If you need some more details, please share the specific information of your requirement with the validation which will be helpful for us to provide a better solution.

Regards,

Pavithra S

[Ignacy Mielniczek]

Is there a way to access the typescript component from within the validation function? For example I want to check the datasource of my grid, or any other field / method.

The example you provided only queries the rendered values from the DOM tree via javascript. That means for example that if a column is not visible, I won't get access to the values stored in that column. Also, I will not have access to my underlying data model or the component methods, which is a very questionable restriction for a validation function...

[Pavithra Subramaniyam]

From your query, we understood that you want to access the other Grid properties inside the Custom validation function. You can achieve your requirement from the grid instance inside that function and get the current edited row details by using the “getRowInfo” method of Grid. Please refer to the below code example and the sample link for more information.

namecustomFn(args) {

  

  console.log(grid.getCurrentViewRecords());

  console.log(grid.getRowInfo(args.element.closest('.e-row')));

  .  .  .

}

 

https://stackblitz.com/edit/angular-rnsqjs-alozbe?file=app.component.ts

[Ignacy Mielniczek]

Please read my last message again. I do not want to access any Grid properties. I want to access the angular component (typescript) hosting the grid. 

For example, inside the namecustomFn(args), I want to iterate the array that you defined in app.component.ts: 

public data: Object[];

Or, inside this function I want to call a method foo() defined in app.component.ts.

How can I do that?

[Pavithra Subramaniyam]

You can access the AppComponent properties inside the custom validation function by binding the component to the function. Please refer to the below code example and the sample link for more information.

public ngOnInit(): void {

    .  .  .

    this.customeridrules = {

      required: true,

      minLength: [this.namecustomFn.bind(this), 'Name already exists!'],

    };

   

  }

  namecustomFn(args) {

    console.log(this.foo());

    .  .  .

  }

  foo() {

    return this.data;

  }

 

Sample: https://stackblitz.com/edit/angular-rnsqjs-peny6m?file=app.component.ts

[Ignacy Mielniczek]

Fantastic! Thank you :)

[Suganya Gopinath]

We are glad that the provided solution worked to solve the issue. Please get back to us for further assistance.