onEditComplete does not work

Question

I have a p-table which entails editable columns. What I need to do is when value of a the field Year is changed, I can get and use it. To start, I would like to be able to show it on the console. To do this, I use onEditComplete funtion

HTML file:

    <p-table [columns]="cols" [value]="cars">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th>ID</th>
                <th>Year</th>            
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input ">
                            <input type="text" [(ngModel)]="rowData.id">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.id}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn [pEditableColumn]="rowData"
 [pEditableColumnField]="'year'" (onEditComplete)="onEditComplete(rowData)">
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input type="text" [(ngModel)]="rowData.year" required>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.year}}
                        </ng-template>
                    </p-cellEditor>
                </td>
              <td pEditableColumn>           
            </tr>
        </ng-template>
    </p-table>

TS file:

onEditComplete (event) {console.log(event);}

But by making changes to the Year field and then pressing tab or enter, I don't get any outputs. Could you help me finding out the problem?

score 2 · Answer 1 · answered Jul 21 '18 at 20:32

2

I solved the problem by removing (onEditComplete)="onEditComplete(rowData)" from td and adding (onEditComplete)="onEditComplete($event)" to p-table:

<p-table [columns]="cols" [value]="cars" (onEditComplete)="onEditComplete($event)">
      //........
      <td pEditableColumn [pEditableColumn]="rowData" [pEditableColumnField]="'year'" >
      //...
</p-table>

answered Jul 21 '18 at 20:32

Alpha Bravo Charlie ...

800
2
13
31

but is it triggered when losing focus? Or must you hit enter to trigger the event? For me (v6) you must press enter. – Gurnard Sep 07 '21 at 09:02

onEditComplete does not work

1 Answers1