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

score 1 · Answer 1 · answered Jun 14 '19 at 14:53

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.

score 1 · Answer 2 · answered Jun 15 '19 at 08:53

1

If you have a look at PrimeNG doc, there is an example with the brand column, editable via a dropdown. And the options sent to that dropdown have the same label and value.

So your colors SelectItem array should look like

[{label:'Orange', value:'Orange'}, {label:'Black', value:'Black'}]

instead of

[{label:'Orange', value:0}, {label:'Black', value:1}]

In your case, you could just fill that array like this :

this.colorNames.forEach(color => {
  this.colors.push({ label: color, value: color });
});

See edited StackBlitz

answered Jun 15 '19 at 08:53

Antikhippe

6,316
2
28
43

appreciate you took time to answer it . but it does not solve the actual problem instead the question is changed. Kaushal Kishore want is to bind with value and label traditionally we do in .net and regular angular select component. – Sean Ch Jun 15 '19 at 17:04
I updated my [StackBlitz](https://stackblitz.com/edit/primeng-table-dropdown-bo9ssj?file=app%2Fapp.component.ts). Does it fit what you need now ? If not, can you give me more details please ? – Antikhippe Jun 16 '19 at 16:13
can you please explain this {{rowData['color'].name}} [{{rowData['color'].id}}] – Sean Ch Jun 20 '19 at 05:39
1

`rowData` corresponds to a line of your table and therefore to an entry of the `cars` array. `rowData['color']` corresponds to the `color` property of such a row which is an object in our case. For instance, for the first row, `rowData['color']` is `{ id: 0, name: "Orange" }`. So `rowData['color'].id` is `0` and `rowData['color'].name` is `Orange`. Is that clear ? – Antikhippe Jun 20 '19 at 11:51

score -1 · Answer 3 · answered May 24 '17 at 11:40

-1

please change ngModel of the dropdown. Now you are trying to bind to data[col.field] please bind to data[col.label].

<p-dropdown [(ngModel)]="data[col.label]" [autoWidth]="false" required="true" [options]="attributeOptionList" class="form-control" [style]="{'width':'100%','height':'32px'}" filter="filter" placeholder="Select Attribute"></p-dropdown>

answered May 24 '17 at 11:40

sainu

2,686
3
22
41

Still its showing the id of the dropdown not the label. I have changed the data[col.field] to data[col.label]. I am binding the p-column attribute with p-dropdown, in p-column there is no attribute available with "label" – Kaushal Kishore May 25 '17 at 12:16

PrimeNG table dropdown edit not working with label

3 Answers3