turboTable primeng input enterKey

Question

Using the incell editing for the primeng TurboTable, I am trying to execute a method by clicking on enter key. Here is the following code:

    <td pEditableColumn>
       <p-cellEditor>
      <ng-template pTemplate="input">
        <input type="text" [(ngModel)]="rowData.vin" (keyup.enter)="onKeyPress($event)">
      </ng-template>
      <ng-template pTemplate="output">
        {{rowData.vin}}
      </ng-template>
    </p-cellEditor>
  </td>

The problem is that the method onKeyPress is not executed by clicking on the enterKey. So I've tried with keypress as following:

    <td pEditableColumn>
       <p-cellEditor>
      <ng-template pTemplate="input">
        <input type="text" [(ngModel)]="rowData.vin" (keypress)="onKeyPress($event)">
      </ng-template>
      <ng-template pTemplate="output">
        {{rowData.vin}}
      </ng-template>
    </p-cellEditor>
  </td>

And what I've noticed is that the method onKeyPress is executed by clicking on any button except the enter Key.

score 2 · Answer 1 · answered Dec 08 '19 at 20:48

I Tried to use keydown instead of Keyup and it works fine

<td pEditableColumn>
   <p-cellEditor>
     <ng-template pTemplate="input">
        <input type="text" [(ngModel)]="rowData.vin" 
               (keydown.enter)="onKeyDown($event)">
     </ng-template>
     <ng-template pTemplate="output">
                {{rowData.vin}}
     </ng-template>
   </p-cellEditor>
</td>

score 0 · Answer 2 · answered Jul 18 '19 at 06:49

I think onEditComplete event catches the enter key press. Check https://www.primefaces.org/primeng/#/table under Events.

To call your function on enter key press you can do this:

<p-table ... (onEditComplete)="onEditComplete($event)">
...
<td [pEditableColumn]="rowData" pEditableColumnField="'vin'">

In your component:
onEditComplete(event) {
  console.log(event.data);
}

turboTable primeng input enterKey

2 Answers2