PrimeNG table dropdown edit not working with label

Question

I am using latest version PrimeNG table for listing records in Angular 4. But I am facing issue with editing the record through p-drowpdown. If I am selecting any of the data from the dropdown then its value field is displaying in column, which should be label field instead.

<p-column field="id" header="Name"  [sortable]="false" resizableColumns="true"
[filter]="true" filterPlaceholder="Search" [editable]="true" [style]="{'overflow':'visible'}">
    <ng-template let-col let-data="rowData" pTemplate="editor">
            <p-dropdown [(ngModel)]="data[col.field]" [autoWidth]="false" required="true" [options]="attributeOptionList" class="form-control" [style]="{'width':'100%','height':'32px'}"
        filter="filter" placeholder="Select Attribute"></p-dropdown>
    </ng-template>
</p-column>

Example: Dropdown Example

value | label

1 | Newyork

2 | Auli

On the selection of city id 1, Newyork (label) should be displayed there, not its value. Currently its displaying 1 instead of Newyork

riorudo riorudo · Accepted Answer · 2019-06-14T14:53:35

There is a possible workaround. Using the example of Sean Ch, I extended the output table cell in the template by a translation method.

<p-cellEditor>
  <ng-template pTemplate="input">
    <p-dropdown appendTo="body" [options]="colors" [(ngModel)]="rowData[col.field]" [style]="{'width':'100%'}"></p-dropdown>
  </ng-template>
  <ng-template pTemplate="output">
    {{translate(rowData[col.field])}}
  </ng-template>
</p-cellEditor>

And in the .ts file I added the translate method.

translate(value: number): string {
  if (value === 1) {
    return 'yes';
  } else if (value === 0) {
    return 'no';
  }
  return '';
}

On the template I also added a <pre> tag to show the changes. You can check my version here link.

For smoother dropdown interaction behavior, I recommend upgrading to a higher version of PrimeNg.

PrimeNG table dropdown edit not working with label

3 Answers