Angular Ag Grid - cell render button to delete row?

Question

I have added a button in the cell which I want to act as a row remover. When clicked must delete that row of data and update grid.

Recreated:https://stackblitz.com/edit/row-delete-angular-btn-cell-renderer-y6gwdubutton?file=src%2Fapp%2Fapp.component.ts

Button render component

@Component({
  selector: "btn-cell-renderer",
  template: `
    <button (click)="btnClickedHandler($event)">DELETE!</button>
  `
})
export class BtnCellRenderer implements ICellRendererAngularComp, OnDestroy {
refresh(params: any): boolean {
throw new Error("Method not implemented.");
}
  private params: any;

  agInit(params: any): void {
    this.params = params;
  }

  btnClickedHandler() {
    let selectedData = this.params.api.getSelectedRows();
    this.params.api.updateRowData({remove: selectedData})
  }

App component

@Component({
  selector: "my-app",
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100vh;"
      id="myGrid"
      class="ag-theme-alpine"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData"
      [frameworkComponents]="frameworkComponents"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  `
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;
  frameworkComponents: any;
  private columnDefs;
  private defaultColDef;
  private rowData: [];

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        field: "athlete",
        cellRenderer: "btnCellRenderer",
        cellRendererParams: {
          clicked: function(field: any) {
            alert(`${field} was deleted`);
          }
        },
        minWidth: 150
      },
      {
        field: "age",
        maxWidth: 90
      },
      {
        field: "country",
        minWidth: 150
      },
      {
        field: "year",
        maxWidth: 90
      },
      {
        field: "date",
        minWidth: 150
      },
      {
        field: "sport",
        minWidth: 150
      },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" }
    ];
    this.defaultColDef = {
      flex: 1,
      minWidth: 100
    };
    this.frameworkComponents = {
      btnCellRenderer: BtnCellRenderer
    };
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json"
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }

This is not working as expected, would appreciate any help.

Recreated: https://stackblitz.com/edit/row-delete-angular-btn-cell-renderer-y6gwdubutton?file=src%2Fapp%2Fapp.component.ts

Jon Vote Jon Vote · Accepted Answer · 2021-02-27T04:58:51

You don't need the parameter you are passing in the columnDefs. You can get rid of that.
You don't need to call getSelectedRows. The params have the node. Use that and grab the data. You just need to put it into an array.

You don't have rowSelection set on the grid, which is probably why getSelectedRows doesn't work - but you don't want to remove selected rows you want to remove this row.

This code will work:

let selectedNode = this.params.node; 
let selectedData = selectedNode.data; 
this.params.api.updateRowData({remove: [selectedData]});

Angular Ag Grid - cell render button to delete row?

1 Answers