CODEWITHSUNDEEP
datagridmaterial-uionrowclick
Mike K.
Mike K.

Reputation: 295

material-ui DataGrid - how to separate selecting the row checkbox from onRowClick

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?

Upvotes: 5

Views: 8672

Answers (2)

רבקה רביבו
רבקה רביבו

Reputation: 1

but if i tried to use the row id that was checked and it is not work. I want that clicking on a row will open a popup on this row but also want thet user will be able to select a few rows (to download ) i tryed onSelectionModelChange but i did console log
}; but it is not worked


const handleSelectionChange = (selection) => {
    console.log('selection changed');
    console.log(selection);
    // sendSelectedBookIds(selection);



        <DataGrid
        rows={manuscriptInfoList}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: { page: 0, pageSize: 10 },
          },
        }}
        pageSizeOptions={[10, 25, 50, 100]}
        checkboxSelection
        disableRowSelectionOnClick
        onRowClick={(params, event) => handleRowClick(params, event)}
        slots={{
          toolbar: CustomToolbar,
          noRowsOverlay: CustomNoRowsOverlay,
        }}
        onSelectionModelChange={handleSelectionChange}


      /> ```

Upvotes: 0

alisasani
alisasani

Reputation: 2968

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
      />

sandbox

Upvotes: 4

Related Questions