Dynamically adding and deleting row in empty ag-grid,first time row is getting deleted, second time throwing error

Question

Initially i am displaying empty grid with header names. on click of add button new empty row should be added with delete icon.I am able to dynamically add row ag-grid.First time if i delete row after adding, its getting deleted, but second time its giving me below error..

Second time, its giving me error.

Uncaught TypeError: Cannot read property 'data' of undefined

Method getting calling on adding row:-

createNewRowData() {
  let newData = {
    tableName: '',
    schemaName: '',
    columnName: '',
    condition: ''
  };
  console.log('newDATA', newData);
  this.setState({
    newCount:this.state.newCount+1
})
}
onAddRow() {
  let newItem = this.createNewRowData.bind(this);
  let res = this.state.gridOptions.api.updateRowData({add: [newItem]});
}

method called on delete:-

methodFromParent(cell) {
  const rowNode = this.state.gridOptions.api.getRowNode(cell.rowIndex);
  this.state.gridOptions.api.updateRowData({remove: [rowNode.data]});
  this.state.newCount--;
}

my Custom cell renderer for delete which appears for each row which i am using in my colDefs:-

export default class DeleteButtonRenderer extends Component {
  constructor(props) {
    super(props);
    this.invokeParentMethod = this.invokeParentMethod.bind(this);
  }
  invokeParentMethod(e) {
    this.props.context.componentParent.methodFromParent(this.props.node);
  }
  render() {
    return (
      <span>
        <a
          style={{ height: 20, lineHeight: 0.5 }}
          onClick={this.invokeParentMethod}
        >
          <i className="far fa-trash-alt fa-2x" />
        </a>
      </span>
    );
  }
}

un.spike un.spike · Accepted Answer · 2020-03-20T16:40:22

So, method methodFromParent(rowIndex) - has rowIndex input property, but it doesn't belong to index, you are using e.target.id in this method .methodFromParent(+e.target.id) - as index - that's why you faced with issue.

on RowNode interface, you can access rowIndex

/** The index of this node in the grid, only valid if node is displayed in the grid, otherwise it should be ignored as old index may be present */
rowIndex: number;

On custom renderer, you are able to access full node data (RowNode interface), so just pass node.rowIndex to invokeParentMethod function.

It could work for first time cuz id could be same as index, but anyway for more details, I need to get your real code, so if you are able, provide plinkr or stackblitz.

Update

So, I dived in deep in your sample and here what I found:

First, this.createNewRowData.bind(this) - is a reference binding, which need to be used implicit, but it's not required here, and you need to execute it directly (explicit), try console.log(newItem) for clarity, you will get a function reference.

Second, createNewRowData - doesn't return a new object, and when you will fix a function exectution like let newItem = this.createNewRowData(); it would be undefined.

Third, if you are planning to use empty objects in the grid, then updateRowData({remove: [rowNode.data]}); wouldn't work and you need to use different way for remove, as an example - selection. answer why

customRenderer

invokeParentMethod(){
    this.props.node.setSelected(true);
    this.props.context.componentParent.methodFromParent();
}

parent (main grid component)

methodFromParent(){
    let selectedData = this.gridApi.getSelectedRows();
    this.gridApi.updateRowData({ remove: selectedData });
};

Demo

Dynamically adding and deleting row in empty ag-grid,first time row is getting deleted, second time throwing error

1 Answers