CODEWITHSUNDEEP
angularprimengprimeng-turbotableprimeng-dropdowns
Kaushal Kishore
Kaushal Kishore

Reputation: 21

PrimeNG table dropdown edit not working with label

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

Upvotes: 2

Views: 6236

Answers (3)

Antikhippe
Antikhippe

Reputation: 6655

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

Upvotes: 1

riorudo
riorudo

Reputation: 1227

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.

Upvotes: 1

sainu
sainu

Reputation: 2701

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>

Upvotes: -1

Related Questions