My React application has a "Merge" button, which calls a web service to bine 2 rows in the ag-grid into one row.

After calling the web service, I want to re-render the grid, with the first row selected. I call my ReRender function to do this. The function calls my web service to re-retrieve the data, then it tries to select the row.

No errors happen, the data is re-rendered, the console shows I did find the matching row to select, so I call node.setSelection(true), but the row is not selected. What can I do? The grid is paginated.

Code:

    ReRender = (inventorykey) => {
            console.log(inventorykey)
            this.rowChecked = []
            fetch( ':8088/mpa/getCockpit?userkey=' + this.state.userkey )
            .then(res=>res.json())
            .then(resj=>{
                if (resj.rows && resj.rows.length>0) {
                    this.setState({rowData:resj.rows})
                }
            })
            .then(
                    console.log('invKey loop:'),
                    this.gridApi.forEachNode( (node) => {
                        if ( node.data.inventorykey === inventorykey ) {
                        console.log('Found it!')  
                        node.setSelected(true);}
                        else{console.log('no '+inventorykey)}
                    })
                )

            .catch(console.log)
            //this.gridApi.redrawRows(redrawRowsParams)
            //this.gridApi.refreshCells()
        }

--Console log output---

    27991
    InventoryList.js:114 invKey loop:
    InventoryList.js:119 Found it!
    105
    InventoryList.js:121 no 27991
    UserBoard.js:86 forceUpdate

​According to the Console Log, it found the row and made the call to select it. So why isn't it selected? Please advise.

My React application has a "Merge" button, which calls a web service to bine 2 rows in the ag-grid into one row.

After calling the web service, I want to re-render the grid, with the first row selected. I call my ReRender function to do this. The function calls my web service to re-retrieve the data, then it tries to select the row.

No errors happen, the data is re-rendered, the console shows I did find the matching row to select, so I call node.setSelection(true), but the row is not selected. What can I do? The grid is paginated.

Code:

    ReRender = (inventorykey) => {
            console.log(inventorykey)
            this.rowChecked = []
            fetch( 'http://apsrp07823.svr.:8088/mpa/getCockpit?userkey=' + this.state.userkey )
            .then(res=>res.json())
            .then(resj=>{
                if (resj.rows && resj.rows.length>0) {
                    this.setState({rowData:resj.rows})
                }
            })
            .then(
                    console.log('invKey loop:'),
                    this.gridApi.forEachNode( (node) => {
                        if ( node.data.inventorykey === inventorykey ) {
                        console.log('Found it!')  
                        node.setSelected(true);}
                        else{console.log('no '+inventorykey)}
                    })
                )

            .catch(console.log)
            //this.gridApi.redrawRows(redrawRowsParams)
            //this.gridApi.refreshCells()
        }

--Console log output---

    27991
    InventoryList.js:114 invKey loop:
    InventoryList.js:119 Found it!
    105
    InventoryList.js:121 no 27991
    UserBoard.js:86 forceUpdate

​According to the Console Log, it found the row and made the call to select it. So why isn't it selected? Please advise.

• javascript
• reactjs
• ag-grid

3 Answers 3

I solved it. The problem was thay my forEachNode loop executed before the grid data was re-loaded from the web service call. It seems the grid loads the data asynchronously, so my code to select the rows works fine, and after it executes, the grid re-loads its data, and looses my selection.

The solution was to use a new event called onRowDataChanged. I put the forEachNode loop there, and it works.

render() {
    return (
        <Container fluid className="ag-theme-balham"  style={{  height: '100%',  margin:'0px', padding:'0px' }}>
            <AgGridReact
                onGridReady={this.onGridReady}
                onRowDataChanged={this.onRowDataChanged}
                onRowSelected = {this.inventorySelectedHandler}
                rowSelection='multiple'
                pagination={true}
                autoSize={true}
                paginationAutoPageSize={true}
                columnDefs={this.state.columnDefs}
                rowData={this.state.rowData}
                modules={AllModules}>
            </AgGridReact>
        </Container>
    );
}

Here is the new function:

onRowDataChanged = params => {
    //console.log('InventoryList.onRowDataChanged!')
    var invkey=this.state.invkey
    if(invkey)
    {
        this.gridApi.forEachNode( (node) => {
            if ( node.data.inventorykey === invkey ) {
            //console.log('Found it!')  
            node.setSelected(true);}
        })
        this.setState({invkey:null})
    }
}

Notice I also have to set invkey to null in the state after I am finished selecting my row.

Thanks to all who replied.

Without looking at the rest of your code, I am suspecting that your grid may have not been configured for selection.

Are you able to select any row to start with?

You may be missing the property rowSelection='single' on your gridOptions

What @Pratik is suggesting is correct, I'd like to add something on top of that.

• You could directly set rowSelection property on the grid element itself (apart from gridOptions).

      <AgGridReact
        ...
        onGridReady={this.onGridReady}
        rowData={this.state.rowData}
        rowSelection='single'
      />
  

• rowSelection: Type of row selection, set to either 'single' or 'multiple' to enable selection. 'single' will use single row selection, such that when you select a row, any previously selected row gets unselected. 'multiple' allows multiple rows to be selected.

Reference: Row Selection