How to prevent row selection after clicking on link inside custom rendered cell in AgGrid

Question

I am using AgGrid and have rowSelection="multiple" on my grid, have {cellRendererFramework: PrintCell} on the last column, which is a small component that displays a link.

I want it so, when I click on the link inside PrintCell, a certain action should be executed, without altering the the state of the grid itself, and keep the current selected lines selected without making the row containing the link selected. I tried doing event.stopPropagation and event.preventDefault to prevent the parent row from getting selected, to no avail.

Any Idea how to achieve this ? thanks

Answer 1

Updated for June 2018:

The API for Ag-Grid has changed. The key change is that there needs to be a change to e.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection from within the onCellFocused event of the grid

Here is a full solution that uses a reusable cell renderer to create actions or buttons at the end of a row that won't trigger row selection. This solution assumes that you are using the React version of ag-grid and that you are using a custom cell renderer.

// class fields

disableClickSelectionRenderers = ['rowActionRenderer'];

// columns defs
...
{headerName: '', field: 'someButton',
    suppressMenu: true, suppressFilter: true, suppressSorting: true,         
    suppressMovable: true,
    suppressNavigable: true, suppressResize: true,
    cellRenderer: 'rowActionRenderer',
    cellRendererParams: {
        icon: <i className="fa fa-pencil"/>,
        onClick: (e, props) => {
            // do the action
        },
    },
},


render() {
    <AgGridReact
        columnDefs={...}
        // ... other properties
        onCellFocused={e => {
            if (e.column && this.disableClickSelectionRenderers.includes(e.column.colDef.cellRenderer)) {
                e.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection = true;
            }
            else {
                e.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection = false;
            }

        }}


}

Answer 2

Since the row click is a specified behaviour it might be easier to perhaps use the checkbox selection and disable the focus row selection entirely. But if you want to keep with this path I generated the required behaviour by intercepting the event in the cell Focus and blocking row selection there.

private onCellFocused($event) {
    if($event.column && $event.column.colId == "commentid"){
        this.gridOptions.suppressRowClickSelection = true;
    } else {
        this.gridOptions.suppressRowClickSelection = false;
    }

This switches the row selection event of entirely but only if you select the column where you don't want the behaviour to occur (caveats: angular 2 example and we have wrapped the ag-grid inside our own component.

Hope this helps...

Answer 3

For TS + Angular

use it inside your rowclick method

Incase if you want to ignore a particular cell this piece of code can help you

if (!(
    this.gridApi?.getFocusedCell()?.column.getColId() ===
    'columnName')) {
  //your code here
}

the gridApi can probably be got from the onGridReady method