2

I am using primeNg controls in my Angular 8 application.I am using primeng p-table control to show the data. I am using p-dropdown also with p-table. On running my application, it looks like below:

enter image description here

When I click on the dropdown(open dropdown to see the options), it shows only one option like below:

enter image description here

Below is my code:

<p-table> 
<ng-template pTemplate="header" let-columns>
    <tr class="header-row">
        <ng-container *ngFor="let col of columns">
            <th                     
                    {{col.name}}                       
                </div>
            </th>
        </ng-container>

    </tr>       
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData" class="data-row">
        <ng-container *ngFor="let col of columns" [ngSwitch]="col.field">
            <td *ngSwitchCase="'app'" classs="ui-resizable-column">
                {{rowData[col.field]}}
            </td>
            <td *ngSwitchCase="'status'" >
                <p-dropdown optionLabel="name" [dataKey]="'id'" [(ngModel)]="rowData.selected" [style]="{'width':'100%'}"></p-dropdown>

            </td>                
        </ng-container>
    </tr>
</ng-template>

Note: When I have used appendTo="body" with p-dropdown it solves the issue.Like below:

Adding appendTo:

<p-dropdown appendTo="body" optionLabel="name" [dataKey]="'id'" [(ngModel)]="rowData.selected" [style]="{'width':'100%'}"></p-dropdown>

After adding appendTo:

enter image description here

I do not want to use appendTo="body"(due to some reason) to solve the issue. If I am not using appendTo="body" then unable to see all the options of dropdown.

Suresh Negi
  • 372
  • 2
  • 6
  • 19

2 Answers2

0

You have to use appendTo=body. By default (without appendTo) primeng dropdown uses position absolute for list of items. It seems that the table or its container has overflow. That's why you don't see a full list of dropdown items - it's blocked by overflow of the container element. Using appendTo body will dynamically inject list of dropdown elements as child of with position fixed.

Artem Krasniuk
  • 1,099
  • 7
  • 6
0

I use dropdown from primeNg too and that's how I make it work in my case. I don't use appendTo.

In your component.ts add this import statement: import {SelectItem} from "primeng";

Then define a variable of that type like webAcs: SelectItem[];

And a variable of type string like this: webAcsSelected: string = "";

In the constructor you can initialize it as follows:

this.webAcs = [];
this.webAcs.push({label: '', value: ''});
this.webAcs.push({label: 'Successful', value: 'Successful'});
this.webAcs.push({label: 'Unsuccessful', value: 'Unsuccessful'});

You can also define int for values but that's up to your needs. In case of int, also the variable webAcsSelected should be of type int and should be initialized to 0. Note that in this example you will have 3 values and the first one is empty so the user could also leave the selection from the dropdown empty if needed. In case of int values the first entry should have value of 0. If you don't need/want that than just remove the first entry.

Implement a method like follows:

webAcsChange(event){
    this.webAcsSelected = event.value;
  }

After that's done, in your component.html you can use the following:

<p-dropdown [options]="webAcs" (onChange)="webAcsChange($event)" [(ngModel)]="webAcsSelected"></p-dropdown>

I hope this will help you. It works great for me.

AxelRoyal
  • 11