Closed RotateAt60MPH closed 3 weeks ago
Played around with the provided example and this may not be a bug with the DataGrid.
Could this be happening because keepNonExistentRowsSelected
is set to true?
From the docs:
If true, the selection model will retain selected rows that do not exist. Useful when using server side pagination and row selections need to be retained when changing pages.
Also noticed that the code shared does not pass in selection
back to the data grid as rowSelectionModel
(but that is probably not the reason the reported error is happening).
Here is a minimal reproduction of the intended behaviour - hope it helps:
import React from 'react';
import { DataGrid, GridToolbar } from '@mui/x-data-grid';
import { useState } from 'react';
import { Button } from '@mui/material';
const initialRows = [
{ id: 1, userName: 'userName1', nickName: 'nickName1' },
{ id: 2, userName: 'userName2', nickName: 'nickName2' },
{ id: 3, userName: 'userName3', nickName: 'nickName3' },
];
const cols = [
{ field: 'id', headerName: 'User Id', width: 90, editable: false },
{
field: 'userName',
headerName: 'User Name',
flex: 1,
editable: false,
},
{
field: 'nickName',
headerName: 'Full Name',
flex: 1,
editable: false,
},
];
export default function Test() {
const [rowSelectionModel, setRowSelectionModel] = React.useState([]);
const [rows, setRows] = useState(initialRows);
const handleDeleteSelected = () => {
setRows((prev) => prev.filter((row) => !rowSelectionModel.includes(row.id)));
};
return (
<div>
<div style={{ height: 300, width: '100%' }}>
<DataGrid
rows={rows}
columns={cols}
checkboxSelection
rowSelectionModel={rowSelectionModel}
onRowSelectionModelChange={(newSelection) => {
// This gets called with an empty array when the rows are updated after delete
console.log('newSelection', newSelection);
setRowSelectionModel(newSelection);
}}
slots={{ toolbar: GridToolbar }}
/>
</div>
{!!rowSelectionModel.length && (
<Button onClick={handleDeleteSelected}>Delete Selected</Button>
)}
</div>
);
}
That was exactly it. I had to remove 'keepNonExistentRowsSelected'. Not sure why I added it there in the first place, but removing it did the trick. And thanks also for the selection model suggestion.
:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@RotateAt60MPH: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.
Steps to reproduce
Link to live example: (required)
Steps:
Current behavior
When delete is clicked, the selected row is deleted from React state, but the selected row count text does not reset and is not possible to reset, even with a forceUpdate(). Selected indexes are not cleared out.
Expected behavior
The selected rows state of the DataGrid should reset.
Context
Need to be able to delete rows and have the selected rows reset.
Your environment
``` Fixfox 129.0.1 System: OS: Windows 10 10.0.19045 Binaries: Node: 16.17.0 - C:\Program Files\nodejs\node.EXE npm: 10.8.2 - ~\AppData\Roaming\npm\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (127.0.2651.86) npmPackages: @emotion/react: ^11.13.0 => 11.13.0 @emotion/styled: ^11.13.0 => 11.13.0 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: 5.16.7 => 5.16.7 @mui/material: ^5.16.7 => 5.16.7 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: 5.16.7 @mui/types: 7.2.15 @mui/utils: 5.16.6 @mui/x-data-grid: ^7.13.0 => 7.13.0 @mui/x-internals: 7.13.0 @types/react: ^18.3.3 => 18.3.3 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 styled-components: ^6.1.12 => 6.1.12 ```npx @mui/envinfo
Search keywords: rows deletion selection