How to prevent onRowClicked when using a cellRenderer in AgGridReact

Question

When using your own cell renderer for e.g. an action column - with links or buttons in it -, AgGridReact still triggers a onRowClicked event when you click on one of the links or buttons. event.stopPropagation and event.preventDefault do not help.

// list of rowActions ...

function RowActionsRenderer(props) {
        let row = props.data;
        return <div>{
            rowActions.map((actionDef, index) =>
                <Button onClick={(event) => {
                    event.stopPropagation();
                    event.preventDefault();
                    //_processAction(actionDef, row)
                }}>{label(actionDef.name)}</Button>
            )
        }</div>;
    }

Definition of cellRenderer:

// ...
columnDefs.push({
                headerName: 'actions',
                field: '-actions-',
                width: 120,
                sortable: false,
                filter: false,
                cellRenderer: 'rowActionsRenderer'
            });


// ...
            frameworkComponents: {
                rowActionsRenderer: RowActionsRenderer
            },

Registration of event listening:

             onRowClicked={(row) => {
                        // always runs event when when clicked on button in the '-actions-' column !!!
                    }}

Now, how do you prevent onRowClicked being called when clicking anything in the '-actions-' column?

score 0 · Answer 1 · answered Aug 17 '20 at 13:42

There are some rather complicated low level calls to the AgGrid api I like to avoid. So my proposed solution would be:

First, do not listen to row clicks.

Second listen to cell clicks and filter out column id '-actions-'

onCellClicked={(cell) => {

                                if (cell.column.getColId() === '-actions-') {
                                    return;
                                }
                                let row = cell.data;
                                // process row data ...
                                
                            }

How to prevent onRowClicked when using a cellRenderer in AgGridReact

1 Answers1