In Angular & Javascript, I have Ag-Grid with checkboxSelection: true in one of the column.

I need to call a function whenever the checkbox is clicked for any row... How to do that ?? Once more How to call a function whenever the checkbox is selected in Ag-Grid?

In Angular & Javascript, I have Ag-Grid with checkboxSelection: true in one of the column.

I need to call a function whenever the checkbox is clicked for any row... How to do that ?? Once more How to call a function whenever the checkbox is selected in Ag-Grid?

• javascript
• angular
• ag-grid
• ag-grid-angular

• You might want to see this : next.plnkr.co/edit/KHj1lstv9GQncxlX4Gvx?p=preview&preview . let me know if this helps. – Shail_bee Commented May 10, 2019 at 6:49
• @CodeReady - Event is getting fired on row Selection its good :) but is it possible to fire that event only on CheckBox Selection ?? – user11194948 Commented May 10, 2019 at 8:22

2 Answers 2

I am assuming that only one of the columns has the checkbox selection.

You can make use of the selectionChanged event binding. This event will be emitted whenever you select or deselect the checkbox. You may read up more about it over here.

However, if you want to check if the selected row is checked or unchecked, it will be better to bind to rowSelected event instead.

On the component.html, for instance, you can bind a method, onSelectionChanged() to the selectionChanged event.

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [suppressRowClickSelection]="true"
    [rowSelection]="rowSelection"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
    (rowSelected)="onRowSelected($event)"
    (selectionChanged)="onSelectionChanged($event)"
  ></ag-grid-angular>

And on your component.ts, you will define the onSelectionChanged() method

onRowSelected(event) {
  console.log(event);
  console.log(event.node.selected);
  console.log(event.rowIndex);
}

onSelectionChanged(event) {
  console.log(event); // verify that the method is fired upon selection
  // do the rest
}

Here's a demo.

    this.DategridOptions = {
          columnDefs: [
            { headerName: 'Name', field: 'Name', width: 500, filter: 'agTextColumnFilter' },
            { headerName: 'Relationship', field: 'Relationship', 
        filter:'agNumberColumnFilter', type: ''},
            { headerName: 'FromDate', field: 'FromDate', width: 200, filter: 
        'agTextColumnFilter', type: 'Date'},
            { headerName: 'ToDate', field: 'ToDate', width: 200, filter: 'agTextColumnFilter', 
        type: 'Date'},
            { headerName:'TicketsClaimed', field: 'TicketsClaimed', width: 200, filter: 
        'agTextColumnFilter'},
            { headerName: 'TicketstobeCancelled', field: 'TicketstobeCancelled', width: 200, 
        filter: 'agTextColumnFilter'}
          ],
          apiDataUrl: this.service.CancelTicket_URL + '/GetModel',
          showSerialNoColumn: true,
          showRowSelection: true,
          checkboxSelection: false,
          onSelectionChanged: (event) => this.onSelectionChanged(event),
          };
     onSelectionChanged(event){
console.log(event);
}