CODEWITHSUNDEEP
angularjsag-grid
BlindSniper
BlindSniper

Reputation: 1853

Ag-Grid require delete button for each row

I am trying to implement a solution with ag-grid and not got stuck into a problem. I am trying to implement edit and delete button in each row .edit button implementation is successful but problem is with delete button. I have tried best of my knowledge (which is little for angular 2) .Please see the implementation as per below code:-

court.component.ts

import { Component } from '@angular/core';
import { Court } from './court.model';
//import './../utils/array.extensions';

import { GridOptions } from "ag-grid";
import { DataCourtService } from '../services/data-court.service';
import { EditButtonComponent } from "../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} from "@angular/core";
import {ICellRendererAngularComp} from "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 this function 

public invokeDeleteMethod() {
           var selectedData = this.params.api.getSelectedRows();
           this.params.api.updateRowsData({remove: selectedData});          
         alert("hi");

    }

I am recieving an error as UpdateRowData is not an function. Can you please help me to achieve this??

Upvotes: 4

Views: 8086

Answers (2)

Fraga
Fraga

Reputation: 1451

The real problem with that code is that 

this.params.api.updateRowsData({remove: selectedData});

Expects an array in version 22.X.X

this.params.api.updateRowsData({remove: [selectedData]});

Upvotes: -1

BlindSniper
BlindSniper

Reputation: 1853

This function was introduced in aggrid 10+ and I am using 8+.updating it resolved the issue.

Upvotes: 3

Related Questions