Problem with ag-grid cell editor based on React Component connected to Redux

Question

I have a problem with custom ag-grid cell editor. I want to get state from Redux but if I use connect function from 'react-redux' it hides isPopup function which is needed by ag-grid. In result my editor is not visible outside of editing cell.

class SelectEditor extends React.Component {
  getValue = () => '123'
  isPopup = () => true

  render() {
    const unselected = { border: '1px solid transparent', padding: 4 };
    const selected = { border: '1px solid lightgreen', padding: 4 };

    const happyStyle = this.props.happy ? selected : unselected;
    const sadStyle = !this.props.happy ? selected : unselected;
    return (
      <div ref='container'>
        <img src='https://www.ag-grid.com/images/smiley.png' style={happyStyle} />
        <img src='https://www.ag-grid.com/images/smiley-sad.png' style={sadStyle} />
      </div>
    );
  }
}
const mapStateToProps = state => ({ happy: state.clientsData });
const mapDispatchToProps = dispatch => ({});

// 1) popup works - I see component
export default SelectEditor;
// 2) popup doesn't work
export default connect(mapStateToProps, mapDispatchToProps)(SelectEditor);

Any ideas how to create proper component?

Were you able to resolve this issue? facing the same issue since one month. Any help would be much appreciated ! — Sathiya Narayanan

Muhammad Ali Muhammad Ali · Accepted Answer · 2020-03-11T06:31:25

Actually ag-grid uses instance of class components to hook any life cycle methods, which in your case it can't get instance of SelectEditor as it is wrapped with connect HoC.

const SelectEditor = (props) => {
  const getValue = () => '123'
  const isPopup = () => true
  React.useImperativeHandle(props.innerRef, () => ({ getValue, isPopup }))

  const unselected = { border: '1px solid transparent', padding: 4 };
  const selected = { border: '1px solid lightgreen', padding: 4 };
  const happyStyle = this.props.happy ? selected : unselected;
  const sadStyle = !this.props.happy ? selected : unselected;

  return (
    <div ref='container'>
      <img src='https://www.ag-grid.com/images/smiley.png' style={happyStyle} />
      <img src='https://www.ag-grid.com/images/smiley-sad.png' style={sadStyle} />
    </div>
  );
}
const mapStateToProps = state => ({ happy: state.clientsData });
const mapDispatchToProps = dispatch => ({});

const ConnectedSelect = connect(mapStateToProps, mapDispatchToProps)(SelectEditor)

export default React.forwardRef((props, ref) => <ConnectedSelect innerRef={ref} {...props} />);

I'm not sure if ag-grid uses refs in case of class components as well, but you can try that as well. If it works then you won't have to convert class to functional component.

Problem with ag-grid cell editor based on React Component connected to Redux

1 Answers