How to access the class function inside ag-grid cell renderer function

1
votes
class abc extends React.Component{
_handleClick(){
console.log("some API call and state change");
}
}

columndefs: [
        {headerName:'Label', field: 'label', width:130, pinned:'left', cellClass:'ag-cell-text-align-center', cellRenderer:linkRenderer},
        {headerName:'Received', field: 'receivedDate', width:130, cellClass:'ag-cell-text-align-center'},
]

function linkRenderer(){
return params.data.link ? `<span style=text-decoration:underline;color:blue;cursor:pointer onClick="this._handleClick()">${params.value}</span>`: params.value;
}

This is telling that "this._handleClick is not a function" So, how to call this._handleClick inside linkRenederer

1
ag-gridag-grid-react

1 Answers

0
votes

I see several syntax problems in your code. For eg: style should be an object. And you should not use onClick like that. Try something like this:

<span 
    style={{ textDecoration: "underline", color: "blue", cursor: "pointer" }} 
    onClick={ this._handleClick }>
    {params.value}
</span>

Also bind the method in the constructor

constructor(props){
    super(props);
    this._handleClick = this._handleClick.bind(this);
}