how to delete ag-grid row with a button in cell renderer

Question

grid for CRUD application. I've some data that shown in ag-grid table like this

I've used ag-grid cell renderer to render that button

import React, { Component } from 'react';

export default class DeleteButton extends Component {
    render() {
        return (
            <span><button onClick={}>X</button></span>
        );
    }
}

I store the data and column defs in component's state like this

    this.state = {
        rewData : [
            {make: "Toyota", model: "Celica", qty:12, price: 35000,  test:"", image:""},
            {make: "Ford", model: "Mondeo", qty:1, price: 32000,  test:"", image:""},
            {make: "Porsche", model: "Boxter", qty:8, price: 72000, test:"", image:""},
            {make: "Porsche", model: "Boxter", qty:8, price: 72000,  test:"", image:""}
        ],
    columnDefs:[
{"headerName":"Make","field":"make","cellEditor":"textCellEditor","cellEditorParams":{"required":true}},
{"headerName":"Model","field":"model","cellEditor":"multiLineTextCellEditor","cellEditorParams":{"required":true}},
{"headerName":"Qty","field":"qty","cellEditor":"numericCellEditor","cellEditorParams":{"required":true}},
{"headerName":"Price","field":"price","cellEditor":"numericCellEditor","cellRenderer":"currencyCellRenderer","cellEditorParams":{"required":true}},
{"headerName":"test","field":"test","cellEditor":"manyToOneCellEditor","cellEditorParams":{"model":"account","host":"http://localhost:8282","fieldAsLabel":"name","fieldAsValue":"id","required":true}},
{"headerName":"image","field":"image","cellEditor":"fileUploadCellEditor","cellRenderer":"imageCellRenderer","cellEditorParams":{"required":true}},
{"headerName":"Delete","cellRenderer":"deleteButton"}
]
        }

and passed that in ag-grid's rowData props:

<AgGridReact
    defaultColDef={defaultColDef}
    columnDefs={this.state.columnDefs}
    rowData={this.state.rowData}
    onGridReady={this.onGridReady}
    onCellValueChanged={this.handleChange}
    frameworkComponents={this.state.frameworkComponents}
    singleClickEdit={true}
    stopEditingWhenGridLosesFocus={true}
    reactNext={true}
/>

when I clicked the delete button, I want to delete corresponding row and also other things like validation or show notification to user, etc

how do i make that button works changing state of rowData?

where do i put the method to change rowData's state?

A lot of information is missing. How you are loading row data, If you click on delete, will it remove rows data from state or from db or something from where it was fetched. share more information like column definitions, cell renderer etc. then i could help you — Sameer Reza Khan, Apr 18 '19 at 13:01
hey, I've added some detailed code and conditions @SameerRezaKhan pls help — Necrofantaisie, Apr 22 '19 at 01:52
I just want to remove data from state, is there any other approach to delete row? — Necrofantaisie, Apr 22 '19 at 02:03
Call a function on click of button and pass the row data, as the row data is an object , you can find and delete object from this.state.rewData — Sameer Reza Khan, Apr 22 '19 at 02:43

score 3 · Accepted Answer · edited Oct 09 '19 at 15:00

3

this.gridApi.updateRowData will receive the rowNode in the array of object

export default class DeleteButton extends Component {
    render() {
        return (
            <span><button onClick={() => this.buttonClick(this.props.node)}>X</button></span>
        );
    }
}

buttonClick = (e) => {

*// e is getting the current node (Row Node)*

        this.setState({
            visible:true
        })
        let deletedRow = this.props.node.data;
        e.gridApi.updateRowData({ remove: [deletedRow] })  // It will update the row
    };

edited Oct 09 '19 at 15:00

Das_Geek

2,775
7
20
26

answered Oct 09 '19 at 13:45

Rajat

152
1
5

I look in the documentation in https://www.ag-grid.com/react-data-grid/grid-api/ and there is no "e.gridApi.updateRowData" was there a change? – Ofer Gal Oct 25 '21 at 13:49
1

This api has now changed to - ```gridOptions.api.applyTransaction({ remove: selectedData });``` – Shivam Latawa Feb 10 '22 at 12:34

score 0 · Answer 2 · answered Apr 21 '23 at 13:51

I work with the same case, and with the version 25.1.0 of ag-grid it works fine by using the applyTransaction as bellow :

buttonClick = (e) => {
    this.setState({visible:true})
    let deletedRow = this.props.node.data;
    e.gridOptionsWrapper.gridOptions.api.applyTransaction({ remove: [deletedRow] })// It will update the row
};

score 0 · Answer 3 · answered May 05 '23 at 07:18

Use `applyTransaction`.

code

if (param.data) param.api?.applyTransaction({ remove: [param.data] });

full cell

{
  field: 'Status & Actions',
  cellRenderer: (param: ICellRendererParams<IVdo>) => {
    param.api?.applyTransaction({ remove: [param.data] });
    return (<h1>My text</h1>)
  }
}

how to delete ag-grid row with a button in cell renderer

3 Answers3

Use applyTransaction.

Use `applyTransaction`.