Search code examples
javascriptreactjsag-gridag-grid-react

Make ag-grid row selectable without a checkbox


I am trying to make a row selectable in ag-grid without a checkbox. I don't want to use a checkbox as is described here but I'll do that if I have to so I can get it to work. Right now I've got the checkbox select callback working. Is there another way for ag-grid to capture the event of clicking anywhere on the row so I can get rid of the extra "select" column? I'm not seeing anything in the documentation.

Right now this is my column definition

export const labelMap = [
  {
    headerName: 'Select',
    headerTooltip: 'Select',
    field: 'select',
    width: myColWidth,
    sortable: false,
    filter: false,
    checkboxSelection: true,
  },
  {
    headerName: 'Id',
    headerTooltip: 'Id',
    field: 'id',
    width: myColWidth,
    sortable: true,
    filter: true,
  },

But the "select" column does not have a checkbox and my ag-grid

      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        onGridReady={onGridReady}
        rowDataChangeDetectionStrategy="IdentityCheck"
        defaultColDef={defaultColumnDef}
        columnTypes={columnTypes}
        rowSelection="multiple"
        onSelectionChanged={onSelectionChanged}
        onRowSelected={onRowSelected}
        enableCellTextSelection
        suppressRowClickSelection="true"
        isRowSelectable={isRowSelectable}
        getRowNodeId={getRowNodeId}
        onRowDataChanged={onRowDataChanged}
        onFilterChanged={onFilterChanged}
        onSortChanged={onSortChanged}
        onFirstDataRendered={onFirstDataRendered}
        {...gridProps}
      />

Solution

  • Remove suppressRowClickSelection={true} and you should be good. Taking from the ag-grid docs:

    suppressRowClickSelection: If true, rows won't be selected when clicked. Use, for example, when you want checkbox selection, and don't want to also select the row when the row is clicked.