Adazzle Grid OnEdit change cell Css

Question

For react, is it possible to change the cell color for a component? I know it is way super easy can be done in Jquery by looking at the id/class of the element and do an addClass, but how to do it on react? I'm still figuring it out the changes, what i can think of is that i set the value on a state, but how i get the affected cell and implement the state? Any idea? Or is there any better grid that I can achieve like what can be done in Jquery?

 constructor(props, context) {
        super(props, context);

        this.state = {
            cellUpdateCss: ""
        };
    }

handleGridRowsUpdated = ({ cellKey, fromRow, toRow, updated, action, originRow }) => {
        let rows = this.state.rows.slice();

        for (let i = fromRow; i <= toRow; i++) {
            let rowToUpdate = rows[i];
            let updatedRow = update(rowToUpdate, { $merge: updated });
            rows[i] = updatedRow;
            this.postToServer(updatedRow.data, JSON.stringify(updated));
        }

        this.setState({ rows });
    };

postToServer = (aX, vC) => {
        var self = this;
        axios.post(this.props.postApi, {
            axNo: aX,
            updated: vC
        })
        .then((response) => {
            console.log(response);
            self.setState({ cellUpdateCss: "green" });
        })
        .catch((error) => {
            console.log(error);
            self.setState({ cellUpdateCss: "red" });
        });
    }

render() {
     return (
      <ReactDataGrid
            onGridRowsUpdated={this.handleGridRowsUpdated} 
           />
      )
}

third party grid that I use https://github.com/adazzle/react-data-grid

score 1 · Accepted Answer · answered May 14 '18 at 06:18

You can accomplish that by applying the style to the row class name, first of all, in handleGridRowsUpdated function you need to set fromRow, toRow to the constructor state then we need to call the changeStyle function that I did with the callback of setState.

  handleGridRowsUpdated = ({ cellKey, fromRow, toRow, updated, action, originRow }) => {
        let rows = this.state.rows.slice();

        for (let i = fromRow; i <= toRow; i++) {
            let rowToUpdate = rows[i];
            let updatedRow = update(rowToUpdate, { $merge: updated });
            rows[i] = updatedRow;
            this.postToServer(updatedRow.data, JSON.stringify(updated));
        }

        this.setState({ rows, fromRow: fromRow, toRow: toRow },()=>{
             this.changeStyle(); 
         });
    };

changeStyle function, it will change the color of the edited row.

changeStyle = () => {
    var all = document.getElementsByClassName('react-grid-Row');
    for (var i = this.state.fromRow; i <= this.state.toRow; i++) {
      all[i].style.color = this.state.cellUpdateCss;
    }
  }

I did a full example on CodeSandbox

Adazzle Grid OnEdit change cell Css

1 Answers1