help to implement my own custom validations

[ibrahem]

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 error

thanks

[Mohammed Farook J]

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. 

1. Do you want perform the validation when focused out current cell.
2. 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]

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]

Hi Ibrahem, 

  

Thanks for your update. 

  

We have analyzed your requirement and created a sample for your reference. In the below sample we have created custom validation for EmployeeID column by using validationRules property of Grid. 

We have created a new Ajax request in the custom function to handle the server side validation and show error message when the EmployeeID value less than 5 in the below sample. You can also achieve your requirement by using this way. 

  

Kindly refer to the below sample for more information. 

  

[fetchdata.component.html] 

<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' 

          (actionComplete)="actionComplete($event)"[toolbar]='toolbar' [allowPaging]='true'> 

    <e-columns> 

        <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true'  width=120></e-column> 

        <e-column field='EmployeeID' headerText='Employee ID' [validationRules]='employeeIDRules' width=150></e-column> 

        . . . . . 

       <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column> 

    </e-columns> 

</ejs-grid> 

  

[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 (<any>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]

thanks 

its work fine

[Dhivya Rajendran]

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]

thanks for help me 

can i add headers to ajax 

i tray

ajax.beforSend

 setRequestHeader('Authorization: Bearer ' + this.oAuthService.getAccessToken());

but not work

[Dhivya Rajendran]

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]

thanks for your nice work

[Dhivya Rajendran]

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]

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]

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, 

1. Blur the edited cell.
2. 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. 

<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' 

          (actionComplete)="actionComplete($event)"[toolbar]='toolbar' [allowPaging]='true'> 

    <e-columns> 

        <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true'  width=120></e-column> 

        <e-column field='EmployeeID' headerText='Employee ID' [validationRules]='employeeIDRules' width=150></e-column> 

        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column> 

        <e-column field='Freight' headerText='Freight' editType="numericedit" format="C2" width=150></e-column> 

        <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column> 

    </e-columns> 

</ejs-grid> 

 

 

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]

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]

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