CODEWITHSUNDEEP
reactjsmaterial-uireact-tsxmui-x-data-gridmui-x
Maryam
Maryam

Reputation: 515

Get row item on checkbox Selection in MUI X Data Grid

I'm getting Data from API and displaying it using React MUI X DataGrid. I have enabled check box selection and I want to get the specific cell items of the selected row and save them in a list.

For Example in the image below, if I click on the checkbox for the 1st row I want to get the "current location" added in a list and then if I click on the 2nd row I want current location of 2nd row added in the existing list.

enter image description here

Below is my current code

<DataGrid
   rows={rows}
   columns={columns}
   checkboxSelection     
   onSelectionModelChange={itm => console.log(itm)}
/>

But I'm getting output like this

enter image description here

I'm very new to React and I'm not sure how to get current Location's value for the selected rows and add it to a list.

Upvotes: 32

Views: 79253

Answers (5)

Stephen Buck
Stephen Buck

Reputation: 149

As of "@mui/x-data-grid-premium": "^6.19.2", ids are integers so remove .toString() in order for this to work. Also the event is now onRowSelectionModelChange, semicolons removed....

this works....

onRowSelectionModelChange={(ids) => {
          const selectedIDs = new Set(ids);
          const selectedRowData = rows.filter((row) =>
            selectedIDs.has(row.id)
          )
          console.log(selectedRowData);
          console.log(selectedIDs)

Upvotes: 0

Sajeel Hassan
Sajeel Hassan

Reputation: 363

A simple solution

const onRowsSelectionHandler = (ids) => {
    const selectedRowsData = ids.map((id) => rows.find((row) => row.id === id));
    console.log(selectedRowsData);
  };

My DataGrid Object

<DataGrid
  rows={rows}
  columns={columns}        
  disableSelectionOnClick
  onSelectionModelChange={(ids) => onRowsSelectionHandler(ids)}
  />

Edit:

'onSelectionModelChange' is now 'onRowSelectionModelChange'

Upvotes: 16

Fabio Batoni
Fabio Batoni

Reputation: 11

This is a model of how it could be used in React:

const [selectedRows, setSelectedRows] = useState([]);

<DataGrid
  rows={data}
  columns={columns}
  localeText={ptBR.components.MuiDataGrid.defaultProps.localeText}
  initialState={{
    pagination: {
      paginationModel: { page: 0, pageSize: 5 },
    },
  }}
  pageSizeOptions={[5, 10]}
  checkboxSelection
  onRowSelectionModelChange={(ids) => {
    const selectedIDs = new Set(ids);
    const selectedRows = data.filter((row: any) =>
      selectedIDs.has(row.id)
    );
    setSelectedRows(selectedRows);
  }}
  {...data}
/>

Upvotes: 1

hasharnashar
hasharnashar

Reputation: 317

This wasn't working for me until I realised onSelectionModelChange is now onRowSelectionModelChange in MUI DataGrid (using "@mui/x-data-grid": "^6.2.1")

For someone like me who has a hard time deciphering docs before coming to stackoverflow I had to figure this out the hard way i.e. by reading docs.

Upvotes: 19

NearHuscarl
NearHuscarl

Reputation: 81390

You can only access the row ids inside onSelectionModelChange callback. If you want to get the whole row objects, use the original rows data and filter the others based on the selected ids.

Note: DataGrid stores each row ID in string internally so if the ID from your original row data is number you may want to convert it toString() before comparing.

rows={rows}
onSelectionModelChange={(ids) => {
  const selectedIDs = new Set(ids);
  const selectedRowData = rows.filter((row) =>
    selectedIDs.has(row.id.toString());
  );
  console.log(selectedRowData);
}}

Live Demo

Edit 66424752/get-row-item-on-checkbox-selection-in-react-material-ui-data-grid

Upvotes: 58

Related Questions