angularjs - Ag-Grid require delete button for each row -
i trying implement solution ag-grid , not got stuck problem. trying implement edit , delete button in each row .edit button implementation successful problem delete button. have tried best of knowledge (which little angular 2) .please see implementation per below code:-
court.component.ts
import { component } '@angular/core'; import { court } './court.model'; //import './../utils/array.extensions'; import { gridoptions } "ag-grid"; import { datacourtservice } '../services/data-court.service'; import { editbuttoncomponent } "../utils/editbutton.component"; @component({ selector: 'court', template: require('./court.component.html'), providers: [datacourtservice] }) export class courtcomponent { private gridoptions: gridoptions; public courts : court[]; onquickfilterchanged(event: any) { this.gridoptions.api.setquickfilter(event.target.value); } constructor() { var courtservice = new datacourtservice(); this.gridoptions = { rowselection: 'single' }; // this.gridoptions.angularcompilerows = true; this.gridoptions.columndefs = [ { headername: "court name", field: "courtname", editable: true } , { headername: "action", cellrendererframework: editbuttoncomponent, colid: "edit" } ]; this.gridoptions.rowdata = courtservice.getcourt(); } }
editbutton.component.ts
import {component} "@angular/core"; import {icellrendererangularcomp} "ag-grid-angular/main"; @component({ selector: 'edit-button', template: `<button (click)="invokeeditmethod()" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span>edit</button> <button (click)="invokedeletemethod()" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span>delete</button>` }) export class editbuttoncomponent implements icellrendererangularcomp { public params: any; aginit(params: any): void { this.params = params; } public invokedeletemethod() { var selecteddata = this.params.api.getselectedrows(); this.params.api.updaterowsdata({remove: selecteddata}); alert("hi"); } public invokeeditmethod() { this.params.api.setfocusedcell(this.params.node.rowindex, 'courtname'); this.params.api.starteditingcell({ rowindex: this.params.node.rowindex, colkey: 'courtname', } ); } }
in function
public invokedeletemethod() { var selecteddata = this.params.api.getselectedrows(); this.params.api.updaterowsdata({remove: selecteddata}); alert("hi"); }
i recieving error updaterowdata not function. can please me achieve this??
Comments
Post a Comment