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

How to achieve context-aware row validation?

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


11 Replies 1 reply marked as answer

PS Pavithra Subramaniyam Syncfusion Team November 1, 2022 12:22 AM

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



IM Ignacy Mielniczek November 2, 2022 09:33 AM

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



PS Pavithra Subramaniyam Syncfusion Team November 3, 2022 07:54 AM

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')[0as 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



KG Kristin Gore November 3, 2022 08:44 PM

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



PS Pavithra Subramaniyam Syncfusion Team November 7, 2022 02:12 AM

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



IM Ignacy Mielniczek November 7, 2022 01:05 PM

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



PS Pavithra Subramaniyam Syncfusion Team November 8, 2022 10:03 AM

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



IM Ignacy Mielniczek November 8, 2022 04:07 PM

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?



PS Pavithra Subramaniyam Syncfusion Team November 9, 2022 07:22 AM

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


Marked as answer

IM Ignacy Mielniczek November 10, 2022 04:31 AM

Fantastic! Thank you :)



SG Suganya Gopinath Syncfusion Team November 11, 2022 12:32 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon