CODEWITHSUNDEEP
javascriptreactjsreact-data-grid
roV
roV

Reputation: 11

How do i get a handle of the "Select All" checkbox in react-data-grid

I want to write some custom logic when the "select all" checkbox is checked in the react-data-grid. So how do i get a handle of that "select all" checkbox when the user clicks on it?

Here is the link to some of the react-data-grid examples http://adazzle.github.io/react-data-grid/#/ and the link to the repo https://github.com/adazzle/react-data-grid

In my render(), i have the react-data-grid defined as shown below.
The table when it is rendered looks like this react data grid demo

let dataGrid = <ReactDataGrid
            ref={node => this.grid = node}
            onGridSort={this.handleGridSort}
            enableCellSelect={true}
            columns={this._columns}
            rowGetter={this.rowGetter}
            rowsCount={this.getSize()}
            minWidth={this.state.width}
            minHeight={this.state.height}
            rowKey="id"
            rowHeight={90}
            headerRowHeight={35}
            rowSelection={{
                showCheckbox: true,
                enableShiftSelect: true,
                onRowsSelected: this.onRowsSelected,
                onRowsDeselected: this.onRowsDeselected,
                selectBy: {
                    indexes: this.state.selectedIndexes
                }
            }
            }
            emptyRowsView={EmptyRowsView}
        >
        </ReactDataGrid>;

Upvotes: 1

Views: 3866

Answers (3)

Amit Agrawal
Amit Agrawal

Reputation: 21

In dataGridPremium you can use - onColumnHeaderClick() function. Below is the example for callback function when clicked on "Select All" column header checkbox specifically -

const handleColumnHeaderClick = (params, event) => {
    if(params.field === "__check__"){
    // your logic to perform action on select All    
    }
}

<DataGridPremium
 columns={columns}
 rows={rows}
 onColumnHeaderClick={handleColumnHeaderClick}
/>

Upvotes: 0

roV
roV

Reputation: 11

ReactDataGrid exposes a ref which we can access in our custom component. Through that we can access the "select all" checkbox.

<ReactDataGrid
            ref={node => this.grid = node}
            ... >
</ReactDataGrid>;

In your custom component, we can access the "select all" checkbox as

this.grid.selectAllCheckbox.checked; //returns either true/false based on checked/un-checked

Upvotes: 0

SGhaleb
SGhaleb

Reputation: 1005

You can achieve this by calculating how many is selected.

Since onRowsSelected: this.onRowsSelected calls how many are rows are selected, you can create your logic in the onRowsSelected() function.

And your function should look like this:

onRowsSelected = (rows) => {
    this.setState({selectedIndexes: this.state.selectedIndexes.concat(rows.map(r => r.rowIdx))});

    let rowIndexes = rows.map(r => r.rowIdx);

    let totalSelected = rowIndexes.length + this.state.selectedIndexes.length;

    if(this.state.rows.length == totalSelected){
      console.log('All rows have been selected');
      //You argument here when SelectAll
    }
  };

Upvotes: 0

Related Questions