EJ2 Grid not triggering cellSelected

Question

I have a EJ2 grid that has a dynamic data source and is populating the EJ2 Grid as follows, the issue I am having is that I can't get any feedback on clicking on the cells specifically.

I have tried various approaches from cellClick, actionBegin, cellSelected, cellClick, rowDataBound, queryCellInfo and more.

It is becoming difficult to find what I am after in the syncfusion documentation.

The ej2 grid works and has full CRUD functionality at the moment, just no breakpoints or console.log are being met on the component regardless of which approach I take.

Any advise?

<ejs-grid #grid [dataSource]='dmtable' 
 [toolbar]="toolbarItems"
 [editSettings]="editSettings" 
 [selectionSettings]='selectionOptions'
 height='410px' 
 (toolbarClick)="toolbarClickHandler($event)"
 (cellSelected)="onCellSelected($event)">
  <ng-template #eGridColumns>
    <e-columns>
      <e-column *ngFor="let column of getColumnNames(dmtable)" [field]="column" [headerText]="column"></e-column>
    </e-columns>
  </ng-template>
</ejs-grid>

ngOnInit(){
this.selectionOptions = { type: 'Single', mode: 'Cell' };
}

onCellSelected(args: CellSelectEventArgs) {
  if (args.cellIndexes && args.cellIndexes.length > 0) {
    const firstSelectedCell = args.cellIndexes[0];
    const rowIndex = firstSelectedCell.rowIndex;
    const columnIndex = firstSelectedCell.cellIndexes[0];
    const rowData = this.grid.getCurrentViewRecords()[rowIndex];
    const column = this.grid.columns[columnIndex] as Column;
    const columnName = column.field;
    const cellValue = rowData[columnName];
    console.log('Selected cell value:', cellValue);
  }
}

Answer 1

Issue lied with the ngOnInit and not reaching the selectionsOptions due to other calls being made.