dropdown as editor in datatable

[buckrogerz]

I am trying to implement a datatable for ui to a property bag
while the switching between an input and the dropdown works when I try to select a value in the dropdown I get nothing just the dropdown appears with the placeholder. Without the placeholder attribute I get the dropdown with the first value showing. Either way I cannot open the dropdown and select a new value. The Console is not showing any errors.

can anyone help?

Code: Select all

<p-dataTable [value]="peopleData" [rows]="10" [paginator]="true" [editable]="true">
    <p-column field="name" header="Descriptor" [filter]="true" filterPlaceholder="Find"></p-column>
    <p-column header="Setting" [editable]="true">
        <template let-person="rowData" pTemplate="body">
            <span>{{person.possibleValues == null? person.enteredValue == null?'':person.enteredValue : person.selectedValue==null?'': person.selectedValue.label}}</span>
        </template>
        <template let-person="rowData" pTemplate="editor">
            <span>
                <input *ngIf="person.possibleValues == null" type="text" pInputText [(ngModel)]="person.enteredValue" />
            </span>
            <span>
                <p-dropdown *ngIf="person.possibleValues != null" [options]="person.possibleValues" [(ngModel)]="person.selectedValue" [autoWidth]="false" placeholder="Select Value"></p-dropdown>
            </span>
        </template>
    </p-column>
</p-dataTable>

[buckrogerz]

So it seems I was able to solve the issue. Needed to set the style on the column (the default should be different IMHO).
Working example:

Code: Select all

<p-dataTable [value]="peopleData" [rows]="10" [paginator]="true" [editable]="true">
    <p-column field="name" header="Descriptor" [filter]="true" filterPlaceholder="Find"></p-column>
    <p-column header="Setting" [editable]="true" [style]="{'overflow':'visible'}">
        <ng-template let-person="rowData" pTemplate="body">
            <span>{{person.possibleValues == null? person.enteredValue == null?'':person.enteredValue : person.selectedValue==null?'': person.selectedValue.label}}</span>
        </ng-template>
        <ng-template let-person="rowData" pTemplate="editor">
            <span>
                <input *ngIf="person.possibleValues == null" type="text" pInputText [(ngModel)]="person.enteredValue" />
            </span>
            <span>
                <p-dropdown *ngIf="person.possibleValues != null" [options]="person.possibleValues" [(ngModel)]="person.selectedValue" [autoWidth]="false" ></p-dropdown>
            </span>
        </ng-template>
    </p-column>
</p-dataTable>