React Data Grid: Custom DropDown Editor: value is not getting updated. Grid is not getting enabled for editing

Question

on react-data-grid 7.0.0-beta

I read through the most recent demos provided in git repo for react-data-grid and implemented a custom dropdown for my use case.

Dropdown seems to be working but it is not updating the grid data upon selection. The editable property doesn't seem to be working either.

test code is implemented here: Sandbox: https://codesandbox.io/s/react-data-grid-custom-dropdown-editor-kcy5n

export const EntryCriteriaGrid = () => {
  const columns = [
    {
      key: "r1",
      name: "Criteria",
      width: "50%",
      resizable: true,
      editable: true
    },
    {
      key: "status",
      name: "Status",
      editor: DropdownCustomEditor,
      editorOptions: {
        editOnClick: true
      },
      editable: true
    },
    { key: "tracker", name: "Tracker", editable: true }
  ];

  const rows = [
    { r1: "data 1", status: "BLOCKED", tracker: "tracker 1" },
    { r1: "data 2", status: "PASS", tracker: "tracker 1" },
    { r1: "data 3", status: "ISSUE", tracker: "tracker 2" }
  ];

  const [state, setState] = useState({ rows });

  const onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    setState((state) => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };
  return (
    <div>
      <ReactDataGrid
        columns={columns}
        rows={state.rows}
        rowsCount={3}
        onGridRowsUpdated={onGridRowsUpdated}
        enableCellSelect={true}
        className="rdg-light"
      />
    </div>
  );
};
export default EntryCriteriaGrid;


import React, { Component } from "react";
import ReactDOM from "react-dom";
export default class DropdownCustomEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: ""
    };
    this.options = [
      { id: "blocked", value: "BLOCKED" },
      { id: "pass", value: "PASS" },
      { id: "issue", value: "ISSUE" },
      { id: "notStarted", value: "NOT STARTED" }
    ];
  }
  componentDidMount() {
    if (this.props.row && this.props.row.status)
      this.setState({ selected: this.props.row.status });
  }
  getValue = function () {
    return { status: this.state.selected };
  };
  getInputNode() {
    return ReactDOM.findDOMNode(this).getElementsByTagName("select")[0];
  }
  update(e) {
    this.setState({ selected: e.target.value });
    this.props.onRowChange({ ...this.props.row, status: e.target.value }, true);
  }
  render() {
    return (
      <select
        className="rdg-select-editor"
        onChange={(e) => this.update(e)}
        autoFocus
        value={this.state.selected}
      >
        {this.options.map((elem) => {
          return (
            <option key={elem.id} value={elem.value}>
              {elem.value}
            </option>
          );
        })}
      </select>
    );
  }
}

score 0 · Answer 1 · answered Aug 01 '21 at 15:31

Just change your code as follows:

In DropdownCustomEditor component:

update(e) {
    this.setState({ selected: e.target.value });
    this.props.onRowChange({ ...this.props.row, status: e.target.value });
  }

In EntryCriteriaGrid component

const onGridRowsUpdated = (rows) => {
    setState({ rows });
  };

and

<ReactDataGrid
        columns={columns}
        rows={state.rows}
        rowsCount={3}
        //onRowsUpdate={onGridRowsUpdated}
        enableCellSelect={true}
        className="rdg-light"
        onRowsChange={(rows) => onGridRowsUpdated(rows)}
      />

React Data Grid: Custom DropDown Editor: value is not getting updated. Grid is not getting enabled for editing

1 Answers1