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.
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.
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]});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.