How can i disable the checkbox in datagrid in MUi when clicking a submit button

Question

Here is what i want to achieve that i select a multiple checkbox and grab the data from them, then click a submit button to send those data to backend, then disable those selected checkbox. here is the code example ,which is exactly the same like mine

https://codesandbox.io/s/controlledselectiongrid-demo-mui-x-forked-3bx8gp?file=/demo.tsx

Answer 1

Use the isRowSelectable prop to indicate if a row can be selected

material ui v5 example

<div style={{ height: 400, width: '100%' }}>
  <DataGrid
    {...data}
    isRowSelectable={(params: GridRowParams) => params.row.quantity > 50000}
    checkboxSelection
  />
</div>

you need use hook to save selected checkbox and remove them in all data you get in isRowSelectable

you can save selected checkbox in onSelectionModelChange prop like

onSelectionModelChange={(newSelectionModel) => {
                    props.setRowMultiSelect(newSelectionModel);
                    
                }}