asked    Judith     2018-07-29       input       150 view        1 Answer

[SOLVED] Using dropdown as input template within PrimeNG turbotable

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>

  1 Answer  

        answered    Emma     2018-07-29      

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





Your Answer





 2018-07-29         Rosemary

PrimeNG TurboTable sortable column sort indicator?

I'm trying to transition an existing PrimeNG Datatable over to the newly-released TurboTable spec, and I've been able to get everything more or less working easily, but I lost the auto-generated sort direction indicators on column headers.Is there a built-in solution for displaying a sort indicator based on template binding provided by p-table, or do I have to attach to the p-table's (sort) event, figure out which column is sorted and what direction, and then update my template from a component method? There is a SortIcon component. Look at this example:<th *ngFor="le...
 sorting                     2 answers                     50 view
 2018-07-29         Zachary

How do you show tab when clicking a button?

I'm using PrimeNG tabs and after doing a lot of research on this I can't find a good solution. I'm trying to show Tab 2 when a button is clicked. Basically, I want to hide Tab 2 by default and when clicking on a button show it. Does anyone know how to make this happen? Thanks a lot in advanced!Here's my code: PLUNKER<p-tabView (onChange)="onChange($event)" [activeIndex]="selectedIndex"> <p-tabPanel header="first" [selected]="true"> <first></first></p-tabPanel> <p-tabPanel header="second"> <ng-template pTemplate="content"> ...
 angular                     1 answers                     45 view
 2018-07-29         Aries

PrimeNG dropdown selected option with dynamic value

How to set PrimeNG p-dropdown selected option with dynamic value ?I am using Formgroup, Formcontrol and my dropdown are set with data querying from database. Now in one of my edit component page I want selected option with dynamic value. Get the dynamic list of values and push it to the drop down. Below is an example. data.dtOrgList contains list of values from service layer. html ------------------ <p-dropdown [options]="orgs" [(ngModel)]="selectedOrg"></p-dropdown> component.ts ------------------- orgs:SelectItem[]; selectedOrg : str...
 angular                     2 answers                     51 view