PrimeNG datatable inline editing

Question

I am using PrimeNG DataTable with Angular and trying to implement something similar to this StackBlitz and I have two issues:

I am loading the table successfully and once I click on the edit button on the grid function editRow(row) it fails due to (see bold font below)

this.iToDoList.filter(row => row.isEditable).map(r => { r.isEditable = false; return r })

error:propert isEditable does not exists on type iToDoList

How to add (inline) record to the table, like add comment ?

HTML

   <p-table #dt  [value]="iToDoList" dataKey="ID"  [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
                             [rows]="10">

                        <ng-template pTemplate="header">
                            <tr>
                                <th>ID</th>
                                <th>Comment</th>
                                <th>Action</th>

                            </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-row>  
                                <tr>
                                    <td>{{row.ID}}</td>
                                    <td>
                                        <div  *ngIf="!row.isEditable">{{row.Comment}}</div>
                                        <div *ngIf="row.isEditable">
                                            <input type="text" [(ngModel)]="row.comment">
                                        </div>
                                    </td>
                                    <td><button (click)="editRow(row)">Edit</button></td>
                                    <td>                                <button (click)="save(row)">Save</button></td>
                                </tr>
                            </ng-template>
            </p-table>

Interface

export interface IToDoList {

    ID: number,
    Comment: string
}

component.ts

iToDoList: IToDoList[] = null;

ngOnInit(): void {
           //this is loading the table successfully 
           this.GetToDoList(this.userID);
    }

  GetToDoList(ID: string) {
        this._dashboardService.getToDoList(ID)
            .subscribe(
            data => {
                this.iToDoList = data.result;

                data.map(row => {
                    row.isEditable = false;
                });    
            },
            error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
    }
//issue is here
  editRow(row) {
        console.log("row " + row.ID)

             this.iToDoList.filter(row => row.isEditable).map(r => { r.isEditable = false; return r })
        row.isEditable = true;
    }

***************************************************UPDATE**************************************************** I fixed my first issue by changing the interface to

export interface IToDoList {

    ID: number,
    Comment: string,
    isEditable: boolean
}

Now my second issue, how to add inline record ?

I fixed my first issue ..see my updated code section...just issue number two — rgoal, May 23 '18 at 17:14
For second issue, you want a button outside the table and if you click on it, it should add a row at the end of the table, that's it ? — Antikhippe, May 23 '18 at 17:53

score 2 · Accepted Answer · answered May 23 '18 at 18:41

2

For second issue, add a button which will call a method addRow() from your component :

<button (click)="addRow()">Add row</button>

This method will add an object of type IToDoList to your iToDoList array :

addRow() {
    this.iToDoList = [...this.iToDoList];
    this.iToDoList.push({Comment: "", isEditable: true});
  }

See StackBlitz (forked from the one you joined)

answered May 23 '18 at 18:41

Antikhippe

6,316
2
28
43

How to do a delete for this.. else formarray concept is more suitable for dynamic grid population – Mohamed Sahir Aug 19 '20 at 16:37

PrimeNG datatable inline editing

1 Answers1