primeng - Showing names for multiSelect inside editable datatable

Question

I'm using primeng recently and I want to create an editable table, which has a multi-select column.

After a bit of trying this is the result. But the problem is I want the winners field (which has a p-multiSelect filled by candidates) to show the "name" property of those candidates (or winners) instead of [object object].

    </p-dataTable [value]="cycles" [editable]="true">
      <p-column field="name" header="Cycle Name" [editable]="true"></p-column>
      <p-column field="winners" header="Winners" [editable]="true">
      <ng-template let-col let-cycle="rowData" pTemplate="editor">
        <p-multiSelect [(ngModel)]="cycle.winners" [options]="candidates"  [style]="{'width':'100%'}" required="true"  appendTo="body"></p-multiSelect>
      </ng-template>
      </p-column>
    </p-dataTable>


    export class Member {
      id : number;
      name : string;
    }
    export class SortitionCycle {
      id : number;
      sortitionId : number;
      winners? : Member[]; //a list of user ids
      status : number;
    }

Any hints?

Ok,It was a newbie mistake, I should have added another <ng-template> with the pTemplate attribute of "body". and in that I used some pipe (didnt know it exists) to view the desired values. — Amir M

BillF BillF · Accepted Answer · 2017-07-27T12:07:11

Your datatype for your multiselect options needs to be of type SelectItem, which is defined as label and value. You should set your value to what you currently have as your id, and your label as what you have your name. Then, the multiselect will automatically display the correct property.

primeng - Showing names for multiSelect inside editable datatable

1 Answers