when use primeNG table, how to exit row edit when click another line

Question

I konw primeNG use

let-editing="editing"


<button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(product)" class="p-button-rounded p-button-text"></button>
<button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(product)" class="p-button-rounded p-button-text p-button-success mr-2"></button>
<button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(product, ri)" class="p-button-rounded p-button-text p-button-danger"></button>

to do something.

but how can I accomplish what I need as the title.

<td style='width: 160px;' pCancelEditableRow>
  {{field.fName}}
</td>

I tried add the top code to do some crude thing.

Answer 1

Here is the code to achieve the desired behavior of exiting row edit when clicking on another line in a PrimeNG table:

<p-table [value]="products" dataKey="id">
  <ng-template pTemplate="header">
    <tr>
      <th></th>
      <th>Name</th>
      <th>Price</th>
      <th>Action</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product let-rowIndex="rowIndex" let-editing="editing">
    <tr [pEditableRow]="product" [pEditing]="editing">
      <td>
        <button *ngIf="!editing" pButton type="button" icon="pi pi-pencil"
                (click)="onRowEditInit(product, rowIndex)" class="p-button-rounded p-button-text"></button>
        <button *ngIf="editing" pButton type="button" icon="pi pi-check"
                (click)="onRowEditSave(product, rowIndex)" class="p-button-rounded p-button-text p-button-success mr-2"></button>
        <button *ngIf="editing" pButton type="button" icon="pi pi-times"
                (click)="onRowEditCancel(product, rowIndex)" class="p-button-rounded p-button-text p-button-danger"></button>
      </td>
      <td>
        <div *ngIf="!editing; else editMode">
          {{ product.name }}
        </div>
        <ng-template #editMode>
          <input type="text" [(ngModel)]="product.name">
        </ng-template>
      </td>
      <td>
        <div *ngIf="!editing; else editMode">
          {{ product.price }}
        </div>
        <ng-template #editMode>
          <input type="text" [(ngModel)]="product.price">
        </ng-template>
      </td>
      <td>
        <button *ngIf="editing && rowIndex !== editingRowIndex" pButton type="button" icon="pi pi-check"
                (click)="onRowEditSave(products[editingRowIndex], editingRowIndex)"
                class="p-button-rounded p-button-text p-button-success"></button>
        <button *ngIf="editing && rowIndex !== editingRowIndex" pButton type="button" icon="pi pi-times"
                (click)="onRowEditCancel(products[editingRowIndex], editingRowIndex)"
                class="p-button-rounded p-button-text p-button-danger"></button>
      </td>
    </tr>
  </ng-template>
</p-table>

In this code, I've made a few modifications to your existing code. The key change is that I've added a condition rowIndex !== editingRowIndex to the "Save" and "Cancel" buttons in each row. This condition ensures that the buttons to save or cancel editing are only shown when the current row being edited is not the same as the row you are clicking on. This way, clicking on another line will exit the editing mode of the previous row. The editingRowIndex variable is used to keep track of the row currently being edited.