I am trying to make a datagrid with a switch button to switch from simple to multiple selection.
const dispatch = useDispatch();
const { selectedTransaction } = useSelector(...)
const [enableMultipleSelection, setEnableMultipleSelection] = useState<boolean | undefined>(true);
const handleEnableMultipleSelectionChange = useCallback((_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
dispatch(toggleSelect([]))
// testing with setTimeOut
// work only 1 time
setTimeOut(() => { setEnableMultipleSelection(checked) }, 1000)
}, [dispatch]);
const handleSelectionChange = useCallback((value: GridSelectionModel) => {
dispatch(toggleSelect(value))
}, [dispatch]);
<FormControlLabel control={<Switch checked={enableMultipleSelection} onChange={handleEnableMultipleSelectionChange} />} label="Select" />
<DataGrid
disableSelectionOnClick={enableMultipleSelection}
selectionModel={selectedTransaction}
onSelectionModelChange={handleSelectionChange}
checkboxSelection={enableMultipleSelection}
{...}
/>
I don't know if it possible with Mui component because when i do that i have some error with it.
index-esm.js:15 Uncaught TypeError: Cannot read properties of undefined (reading 'valueFormatter')
at Object.getCellParams (index-esm.js:15)
at ai.t.current.hasOwnProperty.t.current.<computed> [as getCellParams] (index-esm.js:1)
at Object.setCellFocus (index-esm.js:15)
at ai.t.current.hasOwnProperty.t.current.<computed> [as setCellFocus] (index-esm.js:1)
at HTMLDocument.<anonymous> (index-esm.js:15)
Really need Help please
You can use the onSelectionModelChange to only keep the last marked checkbox:
onSelectionModelChange={(selection) => {
if (!enableMultipleSelection && selection.length > 1) {
const selectionSet = new Set(selectionModel);
const result = selection.filter((s) => !selectionSet.has(s));
setSelectionModel(result);
} else {
setSelectionModel(selection);
}
}}
Check this codesandbox for the example.