Using dropdown as input template within PrimeNG turbotable

Question

I am using PrimeNG TurboTable and I want to integrate p-dropdown component inside the input template within PrimeNG Turbotable. The problem is when I use the following code, the selected element can not be assigned to the value table.

<ng-template pTemplate="body" let-rowData let-row="rowIndex">
      <tr>
        <td>{{listRow[row]}}</td>
        <ng-container *ngIf="edit">
          <td pEditableColumn *ngFor="let col of listCol; let i = index">
            <p-cellEditor>
              <ng-template pTemplate="input">
                <p-dropdown [options]="eltList" [(ngModel)]="rowData[i]"></p-dropdown>
              </ng-template>
              <ng-template pTemplate="output">
                {{rowData[i]}}
              </ng-template>
            </p-cellEditor>
          </td>
        </ng-container>
        <ng-container *ngIf="!edit">
          <td *ngFor="let col of listCol; let i = index">{{rowData[i]}}</td>
        </ng-container>
      </tr>
    </ng-template>

score 0 · Answer 1 · answered Apr 04 '18 at 18:18

Here's a working example:

  <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
    <tr>
      <td [ngStyle]="{'width':'10%'}">{{rowIndex+1}}</td>
      <td *ngFor="let col of columns" pEditableColumn [ngSwitch]="col.field">
        <div *ngSwitchCase="'color'">
          <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">
              {{rowData[col.field]}}
            </ng-template>
          </p-cellEditor>
        </div>
        <div *ngSwitchDefault>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <input type="text" [(ngModel)]="rowData[col.field]">
            </ng-template>
            <ng-template pTemplate="output">
              {{rowData[col.field]}}
            </ng-template>
          </p-cellEditor>
        </div>
      </td>      
    </tr>
  </ng-template>

Plunker example

Using dropdown as input template within PrimeNG turbotable

1 Answers1