Hi
I've been trying for a while to update my old p-datatable to the new turbo table without success. basically its a table full of check boxes that a user can update.
old table - this works!!
<p-dataTable [value]="groups" [editable]="true">
<p-column field="groupDisplayName" header="" [editable]="false"></p-column>
<p-column field="ty" header="TY" [editable]="true">
<ng-template let-row="rowData" let-index="rowIndex" pTemplate="body">
<input type="checkbox" [(ngModel)]="row.ty" />
</ng-template>
<ng-template let-row="rowData" let-index="rowIndex" let-col pTemplate="editor">
<input type="checkbox" [(ngModel)]="row[col.field]" />
</ng-template>
</p-column>
<p-column field="tyf" header="TYF" [editable]="true">
<ng-template let-row="rowData" let-index="rowIndex" let-col pTemplate="body">
<input type="checkbox" [(ngModel)]="row[col.field]" />
</ng-template>
<ng-template let-row="rowData" let-index="rowIndex" let-col pTemplate="editor">
<input type="checkbox" [(ngModel)]="row[col.field]" />
</ng-template>
</p-column>
<p-column field="b" header="B" [editable]="true">
<ng-template let-row="rowData" let-index="rowIndex" let-col pTemplate="body">
<input type="checkbox" [(ngModel)]="row[col.field]" />
</ng-template>
<ng-template let-row="rowData" let-index="rowIndex" let-col pTemplate="editor">
<input type="checkbox" [(ngModel)]="row[col.field]" />
</ng-template>
</p-column>
<p-column field="ly" header="LY" [editable]="true">
<ng-template let-row="rowData" let-index="rowIndex" let-col pTemplate="body">
<input type="checkbox" [(ngModel)]="row[col.field]" />
</ng-template>
<ng-template let-row="rowData" let-index="rowIndex" let-col pTemplate="editor">
<input type="checkbox" [(ngModel)]="row[col.field]" />
</ng-template>
</p-column>
</p-dataTable>
current version with errors. not sure where to put --- let-row="rowData" let-index="rowIndex" or even if this is still possible.
<p-table [columns]="cols" [value]="groups">
<ng-template pTemplate="header" let-columns>
<tr>
<th>ty</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row="rowData" let-index="rowIndex">
<tr>
<td pEditableColumn >
<p-cellEditor>
<ng-template pTemplate="output" >
<!--<p-tableCheckbox [value]="row.ty"></p-tableCheckbox>-->
<!--<input type="checkbox" [(ngModel)]="row.ty" />-->
<input type="text" [(ngModel)]="row.ty">
</ng-template>
<ng-template pTemplate="input">
{{row.ty}}
</ng-template>
</p-cellEditor>
</td>
</tr>
</ng-template>
</p-table>
Thank you.
turbo table checkbox's update from p-datatable issue
Try this...
Code: Select all
<p-table id='groups-grid' [value]='groups' [totalRecords]='totalRecords'
expandableRows='true' [responsive]='true' dataKey='id'
[rows]='5' [paginator]='true' [rowsPerPageOptions]='[5,10,50]'>
<ng-template pTemplate='header'>
<tr>
<th style='width: 40px;'></th>
<th style='width: 40px;'>
<button (click)='addItemClicked( )' pButton type='button' icon='fa fa-plus' class='ui-button-primary'></button>
</th>
<th style='width: 80px;' [pSortableColumn]='"id"'>
id
<p-sortIcon [field]='id'></p-sortIcon>
</th>
<th style='width: 250px;' [pSortableColumn]='"groupDisplayName"'>
group Display Name
<p-sortIcon [field]='groupDisplayName'></p-sortIcon>
</th>
<th style='width: 60px;' [pSortableColumn]='"ty"'>
ty
<p-sortIcon [field]='ty'></p-sortIcon>
</th>
<th style='width: 60px;' [pSortableColumn]='"tyf"'>
tyf
<p-sortIcon [field]='tyf'></p-sortIcon>
</th>
<th style='width: 60px;' [pSortableColumn]='"b"'>
b
<p-sortIcon [field]='b'></p-sortIcon>
</th>
<th style='width: 60px;' [pSortableColumn]='"ly"'>
ly
<p-sortIcon [field]='ly'></p-sortIcon>
</th>
<th style='width: 40px;'></th>
</tr>
</ng-template>
<ng-template pTemplate='body' let-rowData let-columns='columns' let-expanded='expanded'>
<tr>
<td>
<a href='#' [pRowToggler]='rowData'>
<i [ngClass]='expanded ? "pi pi-fw pi-chevron-circle-down" : "pi pi-pw pi-chevron-circle-right"' style='font-size: 1.25em'></i>
</a>
</td>
<td>
<button (click)='editItemClicked( rowData )' pButton type='button' icon='fa fa-edit' class='ui-button-primary'></button>
</td>
<td>{{rowData['id']}}</td>
<td>{{rowData['groupDisplayName']}}</td>
<td>
<input type='checkbox' #ty='ngModel' [(ngModel)]='rowData["ty"]' disabled />
</td>
<td>
<input type='checkbox' #tyf='ngModel' [(ngModel)]='rowData["tyf"]' disabled />
</td>
<td>
<input type='checkbox' #b='ngModel' [(ngModel)]='rowData["b"]' disabled />
</td>
<td>
<input type='checkbox' #ly='ngModel' [(ngModel)]='rowData["ly"]' disabled />
</td>
<td>
<button (click)="deleteItemClicked( group )" pButton type="button" icon="fa fa-trash" class="ui-button-danger"></button>
</td>
</tr>
</ng-template>
<ng-template let-group pTemplate='rowexpansion'>
<tr><td [attr.colspan]='9'>
<div class='ui-grid ui-grid-responsive ui-fluid'>
<div class='ui-grid-row ui-inputgroup'>
<div class='ui-grid-col-3'><label for='id'>id: </label></div>
<div class='ui-grid-col-9' id='id'>{{group.id}}</div>
</div>
<div class='ui-grid-row ui-inputgroup'>
<div class='ui-grid-col-3'><label for='groupDisplayName'>group Display Name: </label></div>
<div class='ui-grid-col-9' id='groupDisplayName'>{{group.groupDisplayName}}</div>
</div>
<div class='ui-grid-row ui-inputgroup'>
<div class='ui-grid-col-3'><label for='ty'>ty: </label></div>
<div class='ui-grid-col-9 ui-inputtext' id='ty'>
<input type='checkbox' id='ty' name='ty' [ngModel]='group.ty' disabled />
</div>
</div>
<div class='ui-grid-row ui-inputgroup'>
<div class='ui-grid-col-3'><label for='tyf'>tyf: </label></div>
<div class='ui-grid-col-9 ui-inputtext' id='tyf'>
<input type='checkbox' id='tyf' name='tyf' [ngModel]='group.tyf' disabled />
</div>
</div>
<div class='ui-grid-row ui-inputgroup'>
<div class='ui-grid-col-3'><label for='b'>b: </label></div>
<div class='ui-grid-col-9 ui-inputtext' id='b'>
<input type='checkbox' id='b' name='b' [ngModel]='group.b' disabled />
</div>
</div>
<div class='ui-grid-row ui-inputgroup'>
<div class='ui-grid-col-3'><label for='ly'>ly: </label></div>
<div class='ui-grid-col-9 ui-inputtext' id='ly'>
<input type='checkbox' id='ly' name='ly' [ngModel]='group.ly' disabled />
</div>
</div>
</div>
</td><tr>
</ng-template>
</p-table>
-
- Information
-
Who is online
Users browsing this forum: No registered users and 11 guests