Ag Grid Call a function on click of checkbox

Question

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?

Demoiselle

You might want to see this : next.plnkr.co/edit/KHj1lstv9GQncxlX4Gvx?p=preview&preview . let me know if this helps. – Sandpiper

@CodeReady - Event is getting fired on row Selection its good :) but is it possible to fire that event only on CheckBox Selection ?? – Demoiselle

Answer 1

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.

Odontograph

@Angelina you have to right click your screen, and inspect element to view the full log that is being printed. – Odontograph

actually on plunker on checkbox click i did not saw anything in console, hence i didn't tried. Let me try that once on my system – Demoiselle

@Angelina Yeah, that is because the event object is quite deeply nested because of the number of properties within it. Perhaps thats why the plnkr console 'filtered' it out. However, it will be visible on your browser's debugger console! Sorry, I forgot to mention that earlier on – Odontograph

i am marking it as the answer since its working fine. on my System, thanks @wentjun. Cheers! – Demoiselle

one more thing how can we check, whether the checkbox has been unchecked after being checked, since event is fired on selectionChanged thats good, it will always be fired – Demoiselle

@Angelina that is a good question. In that case, I would suggest that we bind it to rowSelected event instead. This is because it exposes the node data, which you can check if it is selected or not. Give me a moment to update it – Odontograph

Ok done. Refer to (rowSelected)="onRowSelected($event)". I've updated the demo too. It will print the row number, and true/false depending if it is selected or not. – Odontograph

Answer 2

    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);
}

Holsworth

Don't post code blocks as answers. Consider explaining how your code works and solves problem posted by OP. – Abbotsun