How to add click event on a cell in AgGrid

Question

I'm using AgGrid v28 with Angular 14. I've a very simple requirement. On click of details values I have to call a method.

Screenshot:

My code:

columnDefs = [
    {...},
    {
      headerName: 'Details',
      field: 'partDescription',
      filter: false,
      minWidth: 50,
      cellRendererParams: {
        onClick: this.showPartsHierarchcy.bind(this),
        label: 'partDescription',
        icon: '',
      },
    },
]

showPartsHierarchcy() {
...
}

The details column is populated but on click my method showPartsHierarchcy is not called. Please correct my mistake.

I tried:

This answer.

cellRenderer: function(params: any) {
  return '<a (click)="showPartsHierarchcy">'+ params.value+'</a>'
}

No luck. Please help me.

score 1 · Answer 1 · answered Dec 04 '22 at 15:16

I looked more deeply into the documentation of Grid Events of AgGrid. This is what I changed in my code:

    {
      headerName: 'Details',
      field: 'partDescription',
      filter: false,
      minWidth: 50,
      cellStyle: function (params: any) {
        return { color: '#416AD3' };
      },
      onCellClicked: (event: CellClickedEvent) =>
        console.log('Cell was clicked'),
    },

The callback for the cellClicked event is gridOptions.onCellClicked.

const gridOptions = {
    // Add event handlers
    onCellClicked: (event: CellClickedEvent) => console.log('Cell was clicked'),
}

No cellRenderer required. Replace it with onCellClicked.

How to add click event on a cell in AgGrid

1 Answers1