When i click into a cell the edit mode starts but the text box is empty.
Code:
<p-table #dt [columns]="_gridDefinitions" [value]="_appointmentGridDataSource"
[loading]="loading"
sortMode="multiple"
selectionMode="multiple" [(selection)]="_selectedAppointments" [metaKeySelection]="true" dataKey="AppointmentId"
(onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)"
styleClass="p-datatable-sm p-datatable-gridlines"
[autoLayout]="true">
<ng-template pTemplate="caption">
<div class="p-d-flex p-ai-center p-jc-between">
Terminübersicht
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let gridDefinition of columns" pSortableColumn="{{gridDefinition.PropertyBinding}}">
{{gridDefinition.HeaderLabel}} <p-sortIcon field="{{gridDefinition.PropertyBinding}}"></p-sortIcon>
</th>
</tr>
<tr>
<th *ngFor="let gridDefinition of columns" pSortableColumn="{{gridDefinition.PropertyBinding}}">
<p-calendar (click)="clickOnFilter($event)" (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'Date', 'equals')"
[showButtonBar]="true" styleClass="p-column-filter" placeholder="Registration Date" [readonlyInput]="true" dateFormat="dd.mm.yyyy"
*ngIf="gridDefinition.FormatAsDate === true"></p-calendar>
<input pInputText type="text" (click)="clickOnFilter($event)" placeholder="Search by Name" class="p-column-filter"
(input)="dt.filter($event.target.value, 'RemarkInternal', 'contains')"
*ngIf="gridDefinition.FormatAsDate === false && gridDefinition.HeaderLabel != 'KW' ">
<p-multiSelect (click)="clickOnFilter($event)" [options]="weekDays" placeholder="All" styleClass="p-column-filter" optionLabel="label"
(onChange)="onWeekDayChange($event)"
*ngIf="gridDefinition.FormatAsDate === false && gridDefinition.HeaderLabel === 'KW' "></p-multiSelect>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-appointment let-columns="columns">
<tr [pSelectableRow]="appointment">
<td *ngFor="let gridDefinition of columns" [ngStyle]="{'text-align': gridDefinition.Center === true ? 'center' : 'left' }" pEditableColumn>
<span *ngIf="gridDefinition.FormatAsDate === true && gridDefinition.Editable === false">{{appointment[gridDefinition.PropertyBinding] | date: 'dd.MM.yyyy'}}</span>
<span *ngIf="gridDefinition.FormatAsDate === false && gridDefinition.Editable === false">{{appointment[gridDefinition.PropertyBinding]}}</span>
<p-cellEditor *ngIf="gridDefinition.Editable === true">
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="appointment[gridDefinition.PropertyBinding]">
</ng-template>
<ng-template pTemplate="output">
{{appointment[gridDefinition.PropertyBinding]}}
</ng-template>
</p-cellEditor>
</td>
</tr>
</ng-template>
</p-table>
When i change [(ngModel)] to [value] it works. But i think this is not the way to go according to the offical documentation. https://www.primefaces.org/primeng/showcase/#/table/edit
This works:
<p-cellEditor *ngIf="gridDefinition.Editable === true">
<ng-template pTemplate="input">
<input pInputText type="text" [value]="appointment[gridDefinition.PropertyBinding]">
</ng-template>
<ng-template pTemplate="output">
{{appointment[gridDefinition.PropertyBinding]}}
</ng-template>
</p-cellEditor>