checkbox onchange function for type checkbox

[Akshatha]

I have synfusion grid, how to call onchange checkbox function for grid column having type as checkbox for both static and dynamic columns of grid

case 1: when selecting single checkbox from grid

case 2: when selecting entire checkbox column

[Praveenkumar Gajendiran]

Hi Akshatha,

Greetings from Syncfusion support.

Query: “how to call onchange checkbox function for grid column having type as checkbox for both static and dynamic columns of grid” 

 

Based on your query we infer that you want to call onchange checkbox function for grid column having type as checkbox. We suggest you to use “checkBoxChange()” event of Gird which triggers when the check box state changes in checkbox column.

Please refer the below code example, help document and sample for more information. 

Code Example: 

<ejs-grid [dataSource]='data' height='350' (checkBoxChange)="checkBoxChange($event)"> 

</ejs-grid>
------------------------------------------------------------------------------------------
[app.component.ts]

checkBoxChange(args){ 

      console.log(args); 

    } 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#checkboxchange

Sample: https://stackblitz.com/edit/angular-hzf2lt?file=app.component.html

Please get back to us if you need further assistance.

Regards,
Praveenkumar G 

[César Arismendi]

Hi! 

First, thanks so much for your answer!

Just in case is any help to someone:

I had an issue with the trigger of this event, sometimes it was triggered and sometimes not... It was because it is only triggered when you click directly on the checbox. I was expecting that if you click anywhere on the row and the checkbox changed its selection, then I was expecting that the event was triggered, but that's not the case. 

Best regards,

César A. 

[Dineshnarasimman Muthu]

Hi César A,

We have reviewed your query about event triggering when checkbox changed its selection. We suggest you to use the rowSelecting which triggers when the row is selected and rowDeselecting event which triggers when the row is deselected in the grid.

We have attached the code snippet and sample for your reference.

[app.component.html]

 

<ejs-grid [dataSource]='data' allowPaging='true' [enableHover]="false" 

[allowSorting]='true' [allowSelection]="true" [selectionSettings]="selectOptions" 

(rowSelecting)='rowSelecting($event)' (rowDeselecting)='rowDeselecting($event)' 

[editSettings]='editSettings' [toolbar]='toolbar'>

 

[app.component.ts]

 

  rowSelecting(args) {

    console.log(args);

  }

  rowDeselecting(args) {

    console.log(args);

  }

 

Sample:  https://stackblitz.com/edit/angular-9wrgtc?file=src%2Fapp.component.html,src%2Fapp.component.ts

API Reference:

rowDeselecting: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowdeselecting

rowSelecting: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowselecting

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman M