How to integrate Redux-form with Addazle react-data-grid

Question

How could a grid from Adazzle data grid be embedded into a Redux-Form based react component?

I have a data grid that uses cell editing. The Adazzle grid uses a state variable of rows and some accessor methods to render the data. It has a handler for updating the row. Here is an approach that I've taken to synchronize the form data with changes from the grid. The issue is that the pristine flag is NOT set to false after changing the form values in handleGridRowsUpdated.

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

for (let i = fromRow; i <= toRow; i++) {

  //update the data-grid
  let rowToUpdate = rows[i];
  let updatedRow = {
    ...rowToUpdate,
    ...updated
  };
  rows[i] = updatedRow;

  //update the underlying redux-form values
  let entity = this.props.input.value[i]
  this.props.input.value[i] = {...entity, ...updated}
}

this.setState({rows});
}

Also, here is how I populate the rows from Redux-form. A Redux-forms based component consumes another component that wraps the react-data-grid.

constructor(props) {
 super(props)

 this.state = {
   rows: [],
   filters: {},
   sortColumn: null,
   sortDirection: null,
   selectedIndexes: []
 }

 const {input: {
    value
  }} = props;

 this.state.rows = value;
}

I was thinking also of using a hidden form control maybe that gets just he updates to the grid so that only changed values from the grid are passed back to the server.

How to integrate Redux-form with Addazle react-data-grid

0 Answers0