Select rows of the grid problematically - reactjs

Question

I have a ag-grid has around 100000 rows in it. User can select/deselect multiple rows the grid by using ctrl + click. Selection should work like this -
When user select any row which has its id(one of the columns of the grid) equal to X then grid should automatically select all the rows which has its id equal to X.
Is there any way we can code this behavior?
Thanks in advance.

Answer 1

sample code :
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { AgGridReact } from "ag-grid-react";
import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/ag-theme-balham.css";
import "./styles.css";
import { LargeTextCellEditor } from "ag-grid";
class GridExample extends Component {
constructor(props) {
super(props);
this.isBusy = false;
this.state = {
columnDefs: [
{
headerName: "Athlete",
field: "athlete",
width: 150,
suppressSizeToFit: true
},
{
headerName: "Age",
field: "age",
width: 90,
minWidth: 50,
maxWidth: 100
},
{
headerName: "Country",
field: "country",
width: 120
},
{
headerName: "Year",
field: "year",
width: 90
},
{
headerName: "Date",
field: "date",
width: 110
},
{
headerName: "Sport",
field: "sport",
width: 110
},
{
headerName: "Gold",
field: "gold",
width: 100
},
{
headerName: "Silver",
field: "silver",
width: 100
},
{
headerName: "Bronze",
field: "bronze",
width: 100
},
{
headerName: "Total",
field: "total",
width: 100
}
],
rowData: []
};
}
_fetchData(cb) {
const httpRequest = new XMLHttpRequest();
const updateData = data => {
// this.setState({ rowData: data });
cb(data);
};
httpRequest.open(
"GET",
"https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinnersSmall.json"
);
httpRequest.send();
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
updateData(JSON.parse(httpRequest.responseText));
}
};
}
onGridReady(params) {
//console.log(params);
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
var that = this;
params.api.setDatasource({
getRows(params) {
//console.log("getRows", params);
that._fetchData(data => params.successCallback(data));
}
});
}
//------------------------------------------------
// you need this section
onRowClicked(e) {
this.gridApi.forEachNode(function(node) {
console.log(node.data.age);
node.setSelected(node.data.age === e.data.age);
});
}
render() {
return (
<div style={{ width: "100%", height: "100%" }}>
<div class="grid-wrapper">
<div
id="myGrid"
style={{
boxSizing: "border-box",
height: "100%",
width: "100%"
}}
className="ag-theme-balham"
>
<AgGridReact
rowModelType="infinite"
columnDefs={this.state.columnDefs}
enableColResize={true}
onGridReady={this.onGridReady.bind(this)}
rowData={this.state.rowData}
onRowClicked={this.onRowClicked.bind(this)}
rowSelection={"multiple"}
/>
</div>
</div>
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" }
],
rowData: [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 }
]
};
}
render() {
return (
<div
className="ag-theme-balham"
style={{
height: "500px",
width: "600px"
}}
>
<GridExample />
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);