help to implement my own custom validations

Question

I ran into issue, where i do not know how to implement my own
custom validations for grid fields. 

I need to connect to database to check if value exist then return
validation errorthanks

Mohammed Farook J · Answer

Hi Ibrahem, 

Thanks for contacting Syncfusion Supports. 

Grid performs validation at client side, it doesn’t have support server side validation. So could you please provide the following details for proceeding further. 


Do you want perform the validation when focused out current cell.
Do you want perform the validation when proceed save action (save button click through toolbar / or any custom actions).

Please let us know if you any quarries  

Regards, 
J.Mohammed Farook

ibrahem · Answer

thank you

After filling in one of the fields in grid, the database is connected to make sure that the same number is not used in advance and display a validation error message to the user if the number is already used

  validation start when focused out current cell.

the connection to database will be after the user leave the field and the validation error message will be show  if the number in the  field is used before

Dhivya Rajendran · Answer

Hi Ibrahem,

Thanks for your update.

We have analyzed your requirement and created a sample for your reference. In the below sample we used setRequestHeader method in beforeSend event to add the headers in the AJAX. You can use the below way to resolve your problem.

Kindly refer to the below sample and code example for more information.

[fetchdata.component.ts]

let ajax = new Ajax("/Home/getStatus", "POST", true); // call API

ajax.beforeSend = function (args: any) {

this.httpRequest.setRequestHeader('header', 'true');

}

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/ASP-Core-Angular-master1542294638

Help documentation: https://ej2.syncfusion.com/16.1.37/documentation/base/api-ajax.html?lang=typescript#beforesend

Regards,
R.Dhivya

. . . . .

[fetchdata.component.ts] export class FetchDataComponent { public actionComplete(args: any) { if (args.requestType === 'beginEdit') { args.row.querySelector('form').ej2_instances[0].validationComplete = (e) => { if (e.inputName == "EmployeeID") { if(!this.flag && e.errorElement) { e.errorElement.innerHTML = 'Please enter valid number' this.flag = true; } } } } } ngOnInit(): void { this.toolbar = ['Add', 'Edit', 'Update', 'Cancel']; this.employeeIDRules = { required: true, minLength: [this.customFn, 'Checking...'] }; . . . . } public customFn: (args: { [key: string]: string }) => (void) = (args: { [key: string]: string }) => { let finalvalue = parseInt(args['value'], 10); let ajax = new Ajax("/Home/getStatus", "POST", true); // call API ajax.send(JSON.stringify({ EmployeeID : finalvalue })).then( // (value) => { if (value === "true") { // check the status this.final = true; } else { this.final = false; this.flag = false; } }); return this.final; }; } Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/ASP-Core-angular-server-validation-78144328 Help documentation: https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/edit.html#custom-validation Please get back to us if you need further assistance. Regards, R.Dhivya

ibrahem · Answer

thanks its work fine

Dhivya Rajendran · Answer

Hi Ibrahem, 

Thanks for your update. 

We are happy to hear that the provided solution resolved your problem. 

Please get back to us if you need further assistance. 

Regards, 
R.Dhivya

ibrahem · Answer

thanks for help me can i add headers to ajax i trayajax.beforSend setRequestHeader('Authorization: Bearer ' + this.oAuthService.getAccessToken());but not work

Dhivya Rajendran · Answer

Hi Ibrahem, 
 
Thanks for your update. 
 
We have analyzed your requirement and created a sample for your reference. In the below sample we used setRequestHeader method in beforeSend event to add the headers in the AJAX. You can use the below way to resolve your problem. 
 
Kindly refer to the below sample and code example for more information. 
 
[fetchdata.component.ts] 




let ajax = new Ajax("/Home/getStatus", "POST", true); // call API 
        ajax.beforeSend = function (args: any) { 
            this.httpRequest.setRequestHeader('header', 'true'); 
      }   
 
Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/ASP-Core-Angular-master1542294638  
 
Help documentation: https://ej2.syncfusion.com/16.1.37/documentation/base/api-ajax.html?lang=typescript#beforesend  
 
Regards,R.Dhivya

ibrahem · Answer

thanks for your nice work

Dhivya Rajendran · Answer

Hi Ibrahem, 

Thanks for your update. 

We are happy to hear that the provided solution resolve your problem. 
Please get back to us if you need further assistance on this. 
Regards,R.Dhivya

Mohamed Abdul khader · Answer

hi team, custom function triggering 4 times when i blur the entered field. also in colmodal i have mentioned type as number, but it is accepting alphabets.

Balaji Sekar · Answer

Hi Ibrahem, Query #1: custom function triggering 4 times when i blur the entered field. We have validated the reported problem in our end but it is unsuccessful. Custom validation function is trigger when blur the edited cell or keypressing on focusing edit cell. By default, custom validation function is trigger the following cases, Blur the edited cell. Once validation is fail on the edited cell after that custom function is trigger for every key pressing. For your reference, we have shared a workable sample as given below. Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ASP-Core-angular-server-validation-78144328-762890420.zip If you facing sample problem in your end please reproduce the below sample and share to us that will help to validate further. Query #2: colmodal i have mentioned type as number, but it is accepting alphabets Based on your query, we suggest you to use the editType as numericedit in the number type column it will appear numeric textbox component while editing and it is allow number value only. Please refer the below code example and Documentation for more information.

Help Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/?no-cache=1#cell-edit-type-and-its-params Please get back to us, if you need further assistance. Regards, Balaji Sekar

Unknown · Answer

in this case can we validate employeeIDRules in any other event apart from add
I was trying to duplicate my rows by using toolbackclick event and want my ValidateRules to trigged after gridcomponent.addRecord()

Balaji Sekar · Answer

Hi Leela, 
 
Greetings from the Syncfusion support. 
 
Based on your query we suspect that you want to validate the duplicate rows in the Grid and you have using addRecord method it will add a empty record in the Grid so please share your exact requirement on this scenario. 
 
If we misunderstood your query please share the exact on your requirement to us that will help to validate further. 
 
Regards, 
Balaji Sekar