Checkbox Validation

[James]

Sir, during validation of a checkbox column in edit mode, the current value of the checkbox in the custom validator is current value in the grid, not the current value in the embedded checkbox control

How do I get the value of the embedded checkbox control in the grid?

Background:

I have an editable grid with row edit Normal or Batch.

On column is binary, and uses the editType = 'booleanedit' to render a checkbox control when the row is being edited

<e-column field='dflt' id ='dflt' headerText='Default' [validationRules]='val()' textAlign='Left' type="boolean" displayAsCheckBox='true' editType ="booleanedit" width=40 ></e-column>

The checkbox uses validation by calling a custom validator function 'val()'. Everything works correctly except the validation.

Within the validating custom function  i am attempting to get the value of the checkbox in order to validate it. However, if the column value was 'false' when I opened

the row for edit, then the value that I obtain using is always 'false' irrespective of the setting in the checkbox. I understand that the edit checkbox is its own object and that I need to address that object, and not the value in the grid. I understand the edit checkbox will write its value back to the grid when it is closed. 

Question: How do I access the value of the CheckBox embedded control within a validation function?  My current code is as below. The 'currentVal'

will always be equal to the initial value of the form when it went into edit mode. It will now show the value in the embedded checkbox

    public val(args: IStringIndexString): boolean {

                const currentVal:string = args['value']; //>>Does not address value in embedded control

                /*

                Compare value to other checkboxes in other rows, and enforce only one set to true

                 (code not shown)

                */

        

        return true;  //

    };

[Balaji Sekar]

Hi James, 

 

Greetings From Syncfusion Support 

 

Query#: How do I access the value of the CheckBox embedded control within a validation function? 

 

You can access the value of the checkbox embedded control within a validation function by using checked property of checkbox control. Based on your query we have prepared a sample and we suggest you to follow the below way to achieve your requirement. Please refer the below code example for more information. 

 

App.component.ts 

 

export class AppComponent { 

    @ViewChild('ddsample') 

    public dropDown: DropDownListComponent; 

    public data: Object[]; 

    public editSettings: Object; 

    public toolbar: string[]; 

    public formatoptions: Object; 

    public checkboxval: any; 

 

     public customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => { 

       const currentVal:string = (args.element as any).ej2_instances[0].checked;  //use this checked property from checkbox instance to get the current state of checkbox 

        return true; 

    } 

 

    public ngOnInit(): void {  

        this.pageSettings = { pageCount: 5 }; 

        this.formatoptions = { type: 'dateTime', format: 'M/d/y hh:mm a' } 

        this.checkboxval = { minLength: [this.customFn, 'Checkbox validation'] } 

    } 

} 

 

App.component.html 

 

<ejs-grid #normalgrid id='Normalgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

            <e-columns> 

                .  .  .  .  .  .  . 

                <e-column field='Status' textAlign='Left' [validationRules]='checkboxval' type="boolean" displayAsCheckBox='true' editType ="booleanedit" width='60' ></e-column> 

                .  .  .  .  .  .  . 

            </e-columns> 

        </ejs-grid> 

 

 

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

 

Regards, 

Balaji Sekar.