没有在Ag-grid行链接上调用函数

Question

Code:

columndefs: [
    {headerName:'PTP Users', field: 'userId', width:250, cellClass:'ag-cell-text-align-center', cellRenderer : nameLink},
    {headerName:'Current Team ID', field: 'teamId', width:250, cellClass:'ag-cell-text-align-center', cellRenderer : currentTeamIdRenderer}
]


function nameLink(params) {
    let result = '<span style="text-decoration:underline;color:blue;cursor:pointer" onClick="{alert('logged')}">'+params.data.userId+'</span>';
    return result;
}

_showModal() {
    console.log('inside showmodal');
    this.setState({showModal: true});
}

If I change the onClick alert to this._showModal the "showModal" function is not getting invoked.

Answer 1

There may be a better (or faster way) but (in Angular 2) I would add the click event to the grid html for the row

<ag-grid-ng2 id="leftgrid" #agGrid style="height: 90%; width:98%" class="ag-fresh"
         [gridOptions]="gridOptions" 
        [columnDefs]="columnDefs" 
        [showToolPanel]="showToolPanel" 
        [rowData]="displayedFleet" 
        enableColResize 
        enableSorting 
        enableRangeSelection:false
        enableFilter  
        groupUseEntireRow
        externalRowSelection:true
        suppressRowClickSelection:false 
        toolPanelSuppressGroups:true
        toolPanelSuppressValues 
        debug 
        rowHeight="22" 
        (cellClicked)="alert2($event)"
        rowSelection='single'> 

Note cellClicked event

then in the code behind track if its the correct column dependant on header (or field) properties (if the column is important).

 alert2(ev: any){
    if(ev.colDef.headerName == "TEST"){
        alert('call me');
    }
}

Even if not using Angular 2 the grid will still have its html block and standard event handling that you should be able to adjust to your language of choice by looking at the event notation of the various ag-grid examples..