CODEWITHSUNDEEP
reactjsmaterial-ui
srikar singh Sathish
srikar singh Sathish

Reputation: 43

material ui datagrid checkbox row selection is not working

 <DataGrid
                className="list"
                pagingation
                rows={registeredClasses} 
                columns={this.getColumns()}
                pageSize={10}
                rowLength={10}
                autoHeight
                // sortModel={sortModel}
                components={{
                  pagination:CustomPagination
                }}
                checkboxSelection
                onSelectionChange={(newSelection) =>{
                  console.log(newSelection)
                }}
                
               
              />

tried with onSelectionModelChange as well, selection is happening only if i click on row, if i click on checkbox it is not happening

Upvotes: 4

Views: 11861

Answers (2)

jharris711
jharris711

Reputation: 612

"@mui/x-data-grid": "^6.2.1"

onSelectionModelChange is now onRowSelectionModelChange. From the DataGrid API Docs:

Callback fired when the selection state of one or multiple rows changes.

Signature

function(
    rowSelectionModel: GridRowSelectionModel, 
    details: GridCallbackDetails 
) => void

For more info, check out the DOCS HERE

v4.0.0-alpha.34 +

Breaking changes were included with Version v4.0.0-alpha.34. onRowSelected has been removed and onSelectionModelChange now returns an array with indexes of the selected rows. You can alter the selection model directly via onSelectionModelChange:

Example from Material UI Docs:

import * as React from 'react'
import { DataGrid } from '@material-ui/data-grid'
import { useDemoData } from '@material-ui/x-grid-data-generator'

export default function ControlledSelectionGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  })

  const [selectionModel, setSelectionModel] = React.useState([])

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        checkboxSelection
        onSelectionModelChange={(newSelectionModel) => {
          setSelectionModel(newSelectionModel)
        }}
        selectionModel={selectionModel}
        {...data}
      />
    </div>
  )
}

Updated Demo on Code Sandbox

Material UI Docs - Controlled Selection

Material UI DataTable Change Log on GitHub

Version 4.0.0-alpha.21:

Instead of

onSelectionChange={(newSelection) => {
    console.log(newSelection)
}}

Try onRowSelected, like so:

onRowSelected={(GridRowSelectedParams) => {
    console.log(GridRowSelectedParams);
}}

If you want to keep track of the selection state of all rows, you should use this:

onSelectionModelChange={(GridSelectionModelChangeParams) => {
    // This will return {selections: [selected row indexes]}
    console.log(GridSelectionModelChangeParams);
    if (Array.isArray(GridSelectionModelChangeParams.selectionModel)) {
        // Iterate the selection indexes:
        GridSelectionModelChangeParams.selectionModel.forEach(
            // Get the row data:
            (selection_index) => console.log(rows[selection_index])
        );
    }
}}

I set up a Code Sandbox with a working demo for you to try out

Upvotes: 8

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: 1

Related Questions