turbo table checkbox's update from p-datatable issue

UI Components for Angular
Post Reply
cra601
Posts: 2
Joined: 14 Aug 2017, 11:30

05 Oct 2018, 13:03

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.

PhilHuhn
Posts: 177
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

17 Oct 2018, 23:28

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:&nbsp;</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:&nbsp;</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:&nbsp;</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:&nbsp;</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:&nbsp;</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:&nbsp;</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>

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 11 guests