How to set validation (ex, required etc) on Grid in edit by using #editTemplate.

Question

Hi,I am not getting solution to provide the validation on the Grid where I am using "#editTemplate" for editing. I have some columns out of which I need to put editing feature on only single column. And that single column would be dependent on the datatype. Like if the programmatically provided data type is integer then there should be numeric textbox and if the datatype is Boolean then there has to be a checkbox etc. on that particular column. It means every row on the same column can have different type of datatype. Everything is achieved so far. I am able to render the desired control as per the datatype while editing by using #editTemplate feature. Below is the frontend code:

But I am not able to put the validation on those controls while editing. So please guide me for the same.Thanks

Balaji Sekar · Answer

Hi Naveen, Greetings from the Syncfusion support. Based on your query we can bind the validationRules on the value column using column.validationRules property and we suggest you to define input components id property with field name(“value”) column. Please refer the below code example for more information. [app.component.html]

[app.component.ts] public ngOnInit(): void { this.valuerules = { required: true }; } Please get back to us, if you need further assistance. Regards, Balaji Sekar

Naveen Bangwal · Answer

Hello,Thanks for the solution but now another problem is arriving in it. I want to remove the Validation Rule on the checkbox. As it is giving following error.core.mjs:6469 ERROR TypeError: Cannot read properties of undefined (reading 'toString')    at Object.required (ej2-inputs.es2015.js:7349:107)    at FormValidator.isValid (ej2-inputs.es2015.js:7245:20)    at FormValidator.validateRules (ej2-inputs.es2015.js:7178:27)    at FormValidator.validate (ej2-inputs.es2015.js:6832:22)    at Edit.editFormValidate (ej2-grids.es2015.js:36891:51)    at GridComponent.focusOutHandler (ej2-grids.es2015.js:17021:33)    at ZoneDelegate.invokeTask (zone.js:434:1)    at Object.onInvokeTask (core.mjs:25437:1)    at ZoneDelegate.invokeTask (zone.js:433:1)    at Zone.runTask (zone.js:205:1) So, please guide me how can I implement or remove the validation on checkbox.Thanks

Rajapandi Ravi · Answer

Hi Naveen, We understand that you like to remove the validation in the checkbox, in our previous update we have set the validationRules by mapping the id property with field name(“value”). If you like to remove the validationRules for the checkbox, we suggest you remove the id property in the checkbox component definition. Please refer the below code example for more information. [app.component.html]

//removed the id property in the checkbox component

[app.component.ts] public ngOnInit(): void { this.valuerules = { required: true }; } If you still face any issue, please share the below details that will be helpful for us to provide better solution. 1) In your query you have faced the script error, So please share how you are removing the validationRules for the checkbox column. 2) Share the issue scenario in video demonstration format. 3) Please share your sample datasource structure. 4) Please share your complete Grid rendering code. 5) Please share any simple issue reproducible sample that will be helpful for us to provide better solution. Regards, Rajapandi R

Naveen Bangwal · Answer

Hello,I tried with the id, but it is only working with the "DatePicker" control. For the rest I am using "name" attribute and it is working fine.         #Grid id='Grid' [dataSource]='data' [allowResizing]='true'            [editSettings]='editSettings' [allowSorting]="true" [allowMultiSorting]='true'            (actionBegin)="onActionBegin($event)">                             field='id' isPrimaryKey='true' headerText='id' [visible]='false' textAlign='Left'>                                 field='name' [allowEditing]="false" headerText='Key' textAlign='Center'>                 field='value' headerText='Value' [validationRules]="valueRules">                     #editTemplate let-data>                         *ngIf="data.dataTypeText == propertyType.DATE">                             id="value" placeholder="Date" format='MM/dd/yyyy'                                [(ngModel)]="gridData.value" floatLabelType='Never'>                                                 *ngIf="data.dataTypeText == propertyType.BOOLEAN">                             [(ngModel)]="gridData.value">                                                 *ngIf="data.dataTypeText == propertyType.DECIMAL">                             name="value" format="#.##" [decimals]="2" [validateDecimalOnType]="true"                                [(ngModel)]="gridData.value">                                                                             *ngIf="data.dataTypeText == propertyType.INTEGER">                             name="value" format="#" [decimals]="0" [validateDecimalOnType]="true" [(ngModel)]="gridData.value">                                                                             *ngIf="data.dataTypeText == propertyType.STRING">                             name="value" class="e-input" [(ngModel)]="gridData.value" type="text" />                                                                            *ngIf="data.dataTypeText == propertyType.STRING || data.dataTypeText ==  propertyType.LIST_OF_INTEGER || data.dataTypeText ==  propertyType.LIST_OF_STRING">                             name="value" class="e-input" required [(ngModel)]="gridData.value" type="text" />                                                                                     headerText='Actions' textAlign='Center' [commands]="commands">

But.....................I have two scenario when using "ValidationRule".

scenario1 : when I don't use id or name for checkbox then following error occurs:core.mjs:6469 ERROR TypeError: Cannot read properties of null (reading 'parentElement')    at FormValidator.getErrorElement (ej2-inputs.es2015.js:7301:96)    at FormValidator.validateRules (ej2-inputs.es2015.js:7169:18)    at FormValidator.validate (ej2-inputs.es2015.js:6832:22)    at Edit.editFormValidate (ej2-grids.es2015.js:36891:51)    at InlineEdit.editFormValidate (ej2-grids.es2015.js:34982:41)    at InlineEdit.endEdit (ej2-grids.es2015.js:34991:42)    at InlineEdit.endEdit (ej2-grids.es2015.js:35384:15)    at Edit.endEditing (ej2-grids.es2015.js:36923:25)    at Edit.endEdit (ej2-grids.es2015.js:36836:14)    at GridComponent. (ej2-grids.es2015.js:41266:37)scenario2 : when I use id or name for checkbox then following error occurs:core.mjs:6469 ERROR TypeError: Cannot read properties of undefined (reading 'toString')    at Object.required (ej2-inputs.es2015.js:7349:107)    at FormValidator.isValid (ej2-inputs.es2015.js:7245:20)    at FormValidator.validateRules (ej2-inputs.es2015.js:7178:27)    at FormValidator.validate (ej2-inputs.es2015.js:6832:22)    at Edit.editFormValidate (ej2-grids.es2015.js:36891:51)    at InlineEdit.editFormValidate (ej2-grids.es2015.js:34982:41)    at InlineEdit.endEdit (ej2-grids.es2015.js:34991:42)    at InlineEdit.endEdit (ej2-grids.es2015.js:35384:15)    at Edit.endEditing (ej2-grids.es2015.js:36923:25)    at Edit.endEdit (ej2-grids.es2015.js:36836:14)
There is no problem in rendering the grid. Everything is fine, having issue in editing with validation Rule only.Data is an array of object of the following type:{ id: ' ',name: ' ',value: ' ',dataTypeText: ' '}where "dataTypeText" = "DATE" or "STRING" or "BOOLEAN" or "INTEGER" or "DECIMAL" or "LIST_OF_INTEGER" or "LIST_OF_STRING".*all fields are string type. I am taking care of necessary type conversion to render the controls on "ActionBegin".  onActionBegin(event: any) {    switch (event.requestType) {      case "beginEdit":        if (event.rowData.dataTypeText == this.propertyType.BOOLEAN) {          event.rowData['value'] = JSON.parse(event.rowData['value']);        }        this.gridData = Object.assign({}, event.rowData);        break;      case "save":               // saving here...
         break;    }}Please provide a better approach to solve this. Now I hope you get everything. Let me summarize, I have data which has "dataTypeText"  field. That contains type of the "value" field (could be like .. string, decimal, integer, boolean etc.).I am using "ValidationRule" with "required" validation on "value" column as you can clearly see above.   Now if I edit any value column, that is rendering data correctly and required validation is also working perfectly fine except with the checkbox. As we know that checkbox can be "true" either "false". So followed above two scenarios which is  producing error.      So please come up with a better solution or you can share other approach to achieve what I want to. I hope its clear now. Thanks

Rajapandi Ravi · Answer

Hi Naveen, 

To replicate your mentioned problem, we need to prepare the sample as per your application structure. Currently we are preparing a sample based on your shared information and we will update the further details on or before 1st March 2022. Until then we appreciate your patience. 

Regards, 
Rajapandi R

Naveen Bangwal · Answer

Hello ,Please try to provide it and help me out from current situation. It is becoming difficult for me to wait for more than this.Thanks

Rajapandi Ravi · Answer

Hi Naveen, 

Thanks for your patience 

We are able to reproduce your reported problem at our end. To disable validation on checkbox, we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. 





 
actionComplete(args) { //actionComplete event of Grid 
    if (args.requestType === 'beginEdit' || args.requestType === 'add') { 
      if (args.rowData.dataTypeText !== 'BOOLEAN') { 
        args.form.ej2_instances[0].addRules('value', { required: true }); 
      }  
    } 
  } 
 

Sample: https://stackblitz.com/edit/angular-vdmjrn-b5n7za?file=app.component.ts 

Regards, 
Rajapandi R

Naveen Bangwal · Answer

Hello,It worked....  I must say you have saved my efforts.  But I had to remove [ValidationRule] on the column basis to get the success. Your sample did a great help.  Thanks a lot.

Rajapandi Ravi · Answer

Hi Naveen, 

We are happy to hear that our provided solution was helpful to resolve the problem. 

Please get back to us if you need further assistance. 

Regards, 
Rajapandi R