Ag-grid fill row after select in infinite scroll model reactjs

Question

I use ag-grid as infinite scroll model. When i select some row, i check it in BE and after that i want to fill this row as green (in screenshot blue - it's selected row, i want to fill green this row after some action, for example, after click button for checking this row). I try to set RowClassRules for this way, but it's not worked. But this work before the table waas rendered. After the table was rendered i select row and it's not fill green. I know about updateData function, but it's not supported in infinite scroll model. Can i do this with another way?

render(){
    let cells = this.state.rowIndexWithBadValue;
    let cellsImported = this.state.rowIndexAlreadyImported;
    return(
    ...
        <AgGridReact                                        
            enableColResize={true}                                        
            columnDefs={this.state.columnDefs}
            rowModelType="infinite"
            rowSelection="multiple"
            rowDeselection={true}
            maxBlocksInCache={2}
            suppressRowClickSelection={true}
            getRowNodeId={this.state.getRowNodeId}
            datasource={this.getDataSource(1000)}
            isRowSelectable={this.state.isRowSelectable}
            rowClassRules={{
                "red-row":  function(params) { 
                    return cells.find(e => e === params.node.rowIndex) !== undefined ? true : false;                                           
                },
                "green-row":  function(params) { 
                    return cellsImported.find(e => e === params.node.id) !== undefined ? true : false;                                           
                },
            }}
            onGridReady={this.onGridReady}
            onSelectionChanged={this.onSelectionChanged}
        />
        ...
    )
}

State:

this.state = {
    columnDefs: this.props.columnDefs,
    data: this.props.data,
    selectedData: null,
    getRowNodeId: function(item) {
        let columnIndex = null;
        Object.keys(item).map((elem, index) => {                    
            if (elem === item_id) { columnIndex = index; }
        });
        return Object.values(item)[columnIndex];
    },
    rowIndexWithBadValue: this.props.rowIndexWithBadValue,
    isRowSelectable: function(rowNode) {
        return row.find(e => e === rowNode.rowIndex) == undefined ? true :false;
    },
    jumpButton: true,
    selectButton: false,
    deselectButton: false,
    primaryKey: this.props.primaryKey,
    nextBadRow: null,
    columnsWithDefaultsvalues: this.props.columnsWithDefaultsvalues,
    rowIndexAlreadyImported: this.props.rowIndexAlreadyImported
};

score 0 · Accepted Answer · answered Apr 25 '19 at 14:03

0

For this case you don't have full solution. You can make only one: fill this rows, but after rerendering it lose. So you can only prepare data before first render of table, or you can change source data and rerender table, but in this case you lose all selected rows and you need to set it selected again.

answered Apr 25 '19 at 14:03

Se Br

101
3
14

if you need examples of this solution, write me - i will send you examples – Se Br Apr 25 '19 at 14:04

Ag-grid fill row after select in infinite scroll model reactjs

1 Answers1