CODEWITHSUNDEEP
reactjstypescriptag-grid
a paid nerd
a paid nerd

Reputation: 31532

How do I create an ag-Grid cell editor using React and TypeScript?

I see that the ag-grid-react repo has types, and I also see that the ag-grid-react-example repo has examples. But how do I put the two together and create a cell editor with React and Types?

I'm guessing it's something like this but I can't make TypeScript happy:

class MyCellEditor implements ICellEditorReactComp {
  public getValue() {
    // return something
  }

  public render() {
    const { value } = this.props
    // return something rendering value
  }
}

Upvotes: 2

Views: 1563

Answers (1)

himty
himty

Reputation: 324

I implemented ICellEditor and used ICellEditorParams for prop definitions. For example, this MyCellEditor example from their documentation:

// function to act as a class
function MyCellEditor () {}

// gets called once before the renderer is used
MyCellEditor.prototype.init = function(params) {
    // create the cell
    this.eInput = document.createElement('input');
    this.eInput.value = params.value;
};

// gets called once when grid ready to insert the element
MyCellEditor.prototype.getGui = function() {
    return this.eInput;
};

// focus and select can be done after the gui is attached
MyCellEditor.prototype.afterGuiAttached = function() {
    this.eInput.focus();
    this.eInput.select();
};

// returns the new value after editing
MyCellEditor.prototype.getValue = function() {
    return this.eInput.value;
};

// any cleanup we need to be done here
MyCellEditor.prototype.destroy = function() {
    // but this example is simple, no cleanup, we could
    // even leave this method out as it's optional
};

// if true, then this editor will appear in a popup
MyCellEditor.prototype.isPopup = function() {
    // and we could leave this method out also, false is the default
    return false;
};

became this:

class MyCellEditor extends Component<ICellEditorParams,MyCellEditorState> implements ICellEditor {
  constructor(props: ICellEditorParams) {
    super(props);

    this.state = {
      value: this.props.eGridCell.innerText
    };
  }

  // returns the new value after editing
  getValue() {
    // Ag-Grid will display this array as a string, with elements separated by commas, by default
    return this.state.value;
  };

  // Not sure how to do afterGuiAttached()

  // if true, then this editor will appear in a popup
  isPopup() {
    return true;
  };

  render() {
    return (
      <div>
        hello
      </div>
    );
  }
}

Upvotes: 2

Related Questions