How to add custom validation in grid column edit/add

[Bhargav]

Hi,

I have a grid with add, update features. And few columns have validations like mandatory and max length. My add/update validations works just fine. But here i need to customize the validation error message. Like instead of 'This field is required.' i need some thing like 'Country field is required.' Below is my code

xxx.component.html

<ejs-grid #grid id='grid' [dataSource]='data' (detailDataBound)="onDetailDataBound($event)" (actionBegin) ="onActionBegin($event)" (actionComplete)="onActionComplete($event)" (actionFailure)="onActionFailure($event)" [allowGrouping]='true' [allowSorting] = 'true' allowPaging='true' [allowResizing] ='true' [height]="'100%'" [allowFiltering]='true' [filterSettings]='filterOptions' [pageSettings]='pageSettings'  [editSettings]='editSettings' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true' [allowPdfExport]='true' showColumnChooser='true' >        

        <e-columns>

              <e-column field='Country' headerText='Country' width='160' [validationRules]='countryRule' textAlign='Right' ></e-column>

              <e-column field='Active' headerText='Active' editType='dropdownedit' [edit]='activeParam' width='120'></e-column>              

          </e-columns>

</ejs-grid>

xxx.component.ts

  public countryCodeRule: { required: boolean, maxLength:number };

  ngOnInit(): void {

        this.countryRule = { required: true, maxLength: 5 };

  }

Thanks 

[Vignesh Sivagnanam]

Hi Bhargav 

Thanks for Contacting Syncfusion support 

Based on your query you want to customize the Validation message in the grid while adding or editing in the grid. You can achieve your requirement by using the below code. Please refer the below Code Example and Sample for your reference, 

<ejs-grid 

      [dataSource]="data" 

      [editSettings]="editSettings" 

      [toolbar]="toolbar" 

      height="273px" 

    > 

        <e-column 

          field="CustomerID" 

          headerText="Customer ID" 

          [validationRules]="customerIDRules" 

          width="120" 

        > 

……………. 

      </e-columns> 

    </ejs-grid> 

………………………………. 

……………………………… 

ngOnInit(): void { 

    this.data = data; 

    this.editSettings = { 

      allowEditing: true, 

      allowAdding: true, 

      allowDeleting: true, 

      mode: "Normal" 

    }; 

    this.toolbar = ["Add", "Edit", "Delete", "Update", "Cancel"]; 

    this.orderIDRules = { required: true }; 

    this.customerIDRules = { required: [true, "Customer Id is Required"] }; 

  } 

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

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

Regards 

Vignesh Sivagnanam 

[Bhargav]

Thanks for the quick help Vignesh.

One more issue here i am facing is, the error tool tip position is not aligned with the column. As you can see below i have a ejs-sidebar menu in left, which is absolute. I see because the side bar, the error tooltips are mis aligned. If i collapse the sidebar menu it tooltips are better. Could you please help me with this issue.

Thanks

[Vignesh Sivagnanam]

Hi Bhargav 

Sorry for the late reply 

We have validated your reported query at our end. We have considered this as a bug in Grid component “The validation message is not set properly to the corresponding cells while using the sidebar”. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming weekly patch release on 27^th January 2021. 

You can track the below link for status of this issue fix.   

    

Feedback : https://www.syncfusion.com/feedback/21738/the-validation-message-is-not-set-properly-to-the-corresponding-cells-while-using 

    

We appreciate your patience.   

   

Regards,    

Vignesh Sivagnanam 

[Vignesh Sivagnanam]

Hi Bhargav , 

We are glad to announce that our Essential Javascript2 patch release (v 18.4.39) has been rolled out successfully and in that release we have added the fix for “The validation message is not set properly to the corresponding cells while using the sidebar” issue. So please update your package to this version to include the fix. 

Release Notes: https://ej2.syncfusion.com/documentation/release-notes/18.4.35/?type=all#grid 

Feedback Link: https://www.syncfusion.com/feedback/21738/the-validation-message-is-not-set-properly-to-the-corresponding-cells-while-using 

Sample : https://stackblitz.com/edit/angular-oyac4s-huudro?file=package.json 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

Regards,         

Vignesh Sivagnanam