Infinite loop for custom validation in grid

Question

HiI have been using below link to create validation for one column in my grid.https://ej2.syncfusion.com/documentation/grid/editing/validation However, below code goes into infinity. My idea is to call endedit in case everything is okay so i can do validation for newly added/updated recordscustomFn(args:any){    let role= (window as any)['Role'];    let gridInstance:Grid=(args.element.closest(".e-grid").ej2_instances[0] as Grid);    if((gridInstance.dataSource as any).filter((_:any)=>_.Role==role).length>0){      console.log('duplicate found');      this.rules['Role']['required'][1]='Please enter unique role';    }else{      gridInstance.endEdit();    }    return false;  }

Santhosh Iruthayaraj · Answer

Hi PDev,Greetings from Syncfusion support.When adding custom validation, you can only end the edit and
save the edited record if the custom validation function returns
"true" for your specified case. For example, if you have a column
named "name" and you only want to save the record if the length of
"name" is greater than 5, you need to return "true" from
the custom validation function when this case is satisfied; otherwise, return
false. The edited record will only be saved when "true" is returned
from the custom validation function.From your code snippet, we can see that in the custom
validation function, you only have one return statement with "false".
There is no other condition with "true". As we explained, the
validation only succeeds if we return "true". Instead of this, you
are calling the endEdit method. This method is used to save the edited record
programmatically. Since there is only a "return false" statement, the
validation will always fail, and calling the endEdit method will again trigger
the validation function to check if the record is valid before saving. As a
result, the custom validation function calls the endEdit method, and vice
versa. Without a "return true" statement, this recursive call will
never end.To avoid this infinite loop, you need to add a "return
true" statement instead of the endEdit method call. If the custom
validation function returns "true", it means the validation will
succeed, and the edited record will be saved as per your requirement. Please
find the modified code snippet below for your reference:

customFn(args: any) {
    let role = (window as any)['Role'];
    let gridInstance: Grid = args.element.closest('.e-grid')
      .ej2_instances[0] as Grid;
   
    if (
      (gridInstance.dataSource as any).filter((_: any) => _.Role == role).length >
      0
    ) {
      console.log('duplicate found');
      this.rules['Role']['required'][1] = 'Please enter unique role';
    } else {
      // returning true will end the edit
      return true;
    }
    return false;
  }

Please let us know if you have any further queries.Regards,Santhosh
I

PDev · Answer

Thanks for this. I have Batch Edit settings. and in case of "false" also it is saving data. will you be able to give example ?

PDev · Answer

the reason i am doing end edit is to validate that there is unique value in the column. if i do not do the end edit. in datasource property of the grid will not return newly added/updated data to validate. Please consider this as well

Santhosh Iruthayaraj · Answer

Hi PDev,From your response, we understand that you are updating the Grid
after editing, so that the validation for the next row to be conducted based on
the newly added data. To achieve the desired behavior, instead of using the
endEdit method to update the Grid every time, you can add an additional
condition to the validation, which will be based on the batch changes. To
obtain the batch changes, you can utilize the "getRowsObject"
method. By doing this, the validation will check for the newly added value in
both the dataSource and batch changes. We have prepared a modified code snippet
and sample for your reference, which you can find below:

[app.component.ts]
   
    public customFn: (args: any) => boolean = (args: any) => {
      let customerName = args.value;
   
      // get batch changes
      let batchChanges = (this.gridInstance.getRowsObject() as any)
        .filter((obj) => obj.changes)
        .map((obj) => obj.changes);
   
      if (
        (this.gridInstance.dataSource as any).filter(
          (_: any) => _.CustomerName == customerName
        ).length > 0 ||
        // condition to check for the value in batch changes
        batchChanges.filter((_: any) => _.CustomerName == customerName).length > 0
      ) {
        return false;
      }
   
      return true;
    };

Sample: https://stackblitz.com/edit/angular-grid-with-custom-validationNote: In the provided code snippet and sample, we have used
the "CustomerName" column to demonstrate the validation. In your code
sample, you have used a "Role" field. We recommend modifying the
field name based on your requirements.If this solution is helpful, please consider accepting it as
the solution so that other members can locate it more quickly.Regards,Santhosh I