CODEWITHSUNDEEP
reactjsrenderag-gridinfinite-scrollag-grid-react
Se Br
Se Br

Reputation: 101

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

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?

enter image description here

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
};

Upvotes: 0

Views: 727

Answers (1)

Se Br
Se Br

Reputation: 101

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.

Upvotes: 0

Related Questions