I have included a button within a cell that I want to function as a row deleter. Upon clicking, it should remove the respective row of data and update the grid accordingly.
Check out the recreation here:https://stackblitz.com/edit/row-delete-angular-btn-cell-renderer-y6gwdubutton?file=src%2Fapp%2Fapp.component.ts
Button rendering 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;
});
}
The functionality is currently not behaving as intended, any assistance would be greatly appreciated.
Simply recreate it here