Switch p-table cell programmatically to edit mode in Primeng

Question

I have a primeng table (the new module) with editable cells displaying simple data. Outside the table I have a button to add new empty objects/rows to the table and I would like to jump to edit mode in the new cell programmatically when the button is clicked.

I am able to add the empty row to the table but I have no idea how to switch the new row cell element into edit mode.

I am getting the EditableColumn like this: @ViewChild(EditableColumn) editableColumn: EditableColumn;

...
<td *ngFor="let col of columns" style="width:150px;height: 27px" #td pEditableColumn>
...

On the editableColumn I am able to call the openCell() method but it always jumps to the first generated cell and not to the new generated row cell.

Can anyone help with this? Are there any better approaches to achieve my goal?

Can you please create a Plunker or at least share more code ? — Antikhippe, Mar 15 '18 at 19:03
I know this is old, but did you ever figure out how to handle this? — Tommo, Apr 23 '19 at 21:23
Same question here: apparently this is not easy. Especially since the editable HTML tags are not present, but get added dynamically. — tbeernot, May 04 '20 at 07:29
See https://stackoverflow.com/questions/61587359/primeng-table-how-to-start-a-cell-edit/64902518#64902518 — A.S.K Stringer, Nov 19 '20 at 00:25

score 2 · Answer 1 · edited Jul 20 '20 at 20:03

Having the same problem. I've figured out a solution for my case of columns being generated dynamically. I had to open one specific cell of each row if sibling table fields cells were clicked. Eg. on the click of a city field, I should open Address cell.

I'm aware the solution might look ugly, but it's the only possible solution I could find.

TS:

@ViewChild(EditableColumn) editableColumn: EditableColumn
@ViewChildren(EditableColumn) private editableColumns: QueryList<EditableColumn>

openGoogleAddress(event): void {
  if (event?.path) {
    const currentRowAddressCell = this.editableColumns.filter(
      item => item?.el?.nativeElement === event?.path[3]?.children[1]
    )
    this.editableColumn = currentRowAddressCell[0]

    setTimeout(() => {
      this.editableColumn.openCell()
    }, 0)
  }
}

HTML:

<div *ngSwitchCase="'city'">
  <span class="p-flex" (click)="openGoogleAddress($event)">{{
    (rowData[col.value][col.sublabel] | titlecase) || emptyDash
  }}</span>
</div>

score 1 · Answer 2 · answered Sep 19 '19 at 14:59

1

The trick to this one is to call onClick(event) on the editable column you would like to open.

editableColumn.onClick(e);

You can get a reference to the column a number of ways, one is using ViewChildren

@ViewChildren(EditableColumn) private editableColumns: QueryList<EditableColumn>;

answered Sep 19 '19 at 14:59

WizardsOfWor

2,974
29
23

But how to set all cells in my table as editable just after loading the table in Angular? – Matley Nov 17 '20 at 12:48

score -3 · Answer 3 · answered Mar 21 '18 at 12:43

-3

This can be easily done with:

Primeng table:

<p-table #dt [columns]="header" [value]="data">

Typescript:

addRow(dt: Table) { dt.editingCell = document.getElementById('cellId');}

answered Mar 21 '18 at 12:43

ninjaxelite

1,139
2
20
43

You don't show what the id cellId is attached to so this is of little help. – WizardsOfWor Sep 18 '19 at 16:26

Switch p-table cell programmatically to edit mode in Primeng

3 Answers3

Linked