I am using a DataGrid to manage a service configuration. I would like to use the auto-generated row checkboxes to manage multiple delete operations, but would like to use the onRowClick event to feed row data to a modal dialog form for editing. My onRowClick handler works just fine and populates the modal exactly the way I want it to. Unfortunately, clicking on the row also selects the row -- in other words, the checkbox for the row clicked is selected. I would like the row to be selected only when the checkbox itself is clicked, not when the row is clicked.
My DataGrid declaration looks like this.
<DataGrid
columns={this.columns}
rows={fmConfigs}
pageSize={10}
checkboxSelection
autoHeight
onRowClick={(rowData) => this.handleClickOpenFmConfigForm(rowData.row)}
/>
Normally, I would expect there be a second argument to the onRowClick handler to represent the event, so I could call something like e.stopPropagation(), but the only thing passed is an object of type GridRowParams, for which there is no documentation. I was hoping that maybe the event object was buried in there somewhere but I can't find it. When I print the object to the console, I can see that there is a lot of data -- that's how I was able to find the row data I needed to pass to my form -- but I do not see the event.
Does anyone have any idea how this can be done?
add disableSelectionOnClick={true} to the DataGrid component and according to the doc, the selection on click on a row or cell would be disabled.
<DataGrid
disableSelectionOnClick={true}
rows={rows}
columns={columns}
pageSize={5}
checkboxSelection
/>