Primeng p table value change event - primeng

I am trying invoke the method when any editable cell value is changed on the primeng p-table. I tried to use onEditComplete event but it will fires only when I edit the cell and press enter. When I edit the cell and move out the mouse it is not firing. Can anyone suggest what is the right event I am supposed to add here?
<p-table [value]="sampleData" [scrollable]="true" scrollHeight="200px" [resizableColumns]="true"
(onEditComplete)="getLandLineTotal($event)">
<ng-template pTemplate="header">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData>
<tr>
<td style="width: 10%">
{{rowData.col1}}
</td>
<td>
{{rowData.col2}}
</td>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData.col3" required>
</ng-template>
<ng-template pTemplate="output">
{{rowData.col3| currency}}
</ng-template>
</p-cellEditor>
</td>
</tr>
</ng-template>
</p-table>

Instead of:
<td pEditableColumn>
Try:
<td [pEditableColumn]="sampleData.col3" [pEditableColumnField]="'col3'">
Developer console should show:
{field: "col3", data: <whatever you entered into the text box>}

Related

PrimeNG p-table column widths on scrollable table

I have a p-table defined with [scrollable]="true"
<p-table
*ngIf="!loading"
[value]="data"
[resizableColumns]="true"
[reorderableColumns]="true"
[columns]="columns"
[autoLayout]="true" <---
[scrollable]="true" <---
scrollHeight="75vh"
>
The [scrollable] changes the table layout from display: table-cell to display:flex and thus the [autoLayout] is now ignored.
I have tried setting the styles here to percentage widths (i.e. 10%/10%/80%) but it has no effect with the flex display table.
<th
*ngFor="let col of columns"
pSortableColumn="{{ col.field }}"
pReorderableColumn
pResizableColumn
[ngStyle]="{'width': col.width}" <---
>
I see there is a PrimeNG issue commenting on this, but are there any workarounds I can use to get set column widths when using [scrollable]?
https://github.com/primefaces/primeng/issues/5510#issuecomment-432155295
try the following:
<!-- File: employee-grid.component.html -->
<p-table #dt id='employees-grid' [value]='employees' [responsive]='true'
scrollHeight='420px' [scrollable]='true'
[(selection)]='selectedEmployee' selectionMode='single'
(onRowSelect)='onRowSelect($event)' dataKey='EmployeeId'>
<ng-template pTemplate='caption'>
<div class='nsg-row nsg-text-center'>
<h5 class='nsg-primary-color'>Employee Selection</h5>
</div>
</ng-template>
<ng-template pTemplate='header'>
<tr>
<th style='flex: 0 0 320px;'>
Name
<p-columnFilter type='text' field='EmployeeName' matchMode='contains' display='menu'></p-columnFilter>
</th>
<th style='flex: 0 0 160px;'>
Company
<p-columnFilter type='text' field='CompanyShortName' display='menu'></p-columnFilter>
</th>
<th>
Div/Depart
<p-columnFilter type='text' field='DeptDivShortName' display='menu'></p-columnFilter>
</th>
<th>
Job Title
<p-columnFilter type='text' field='JobTitle' display='menu'></p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate='body' let-rowData let-idx='rowIndex'>
<tr [pSelectableRow]='rowData' [pSelectableRowDisabled]='!editable' [ngClass]="{'nsg-state-highlight' : idx === selectedRowIdx}">
<td style='flex: 0 0 320px;'>
<span class='p-column-title'>Name</span>
{{rowData.EmployeeName}}
</td>
<td style='flex: 0 0 160px;'>
<span class='p-column-title'>Company</span>
{{rowData.CompanyShortName}}
</td>
<td>
<span class='p-column-title'>Division/Depart</span>
{{rowData.DeptDivShortName}}
</td>
<td>
<span class='p-column-title'>Job Title</span>
{{rowData.JobTitle}}
</td>
</tr>
</ng-template>
</p-table>
<!-- End of employee.grid.component.html -->
Also check the Primefaces forum for solutions, but generally Stack Overflow is the best source.

Primeng 9 Table, horizontal scroll issue

I am trying to implement full page scroll in primeng table similar to one given at https://www.primefaces.org/primeng/v9-lts/#/table/scroll. But I am not getting the horizontal scroll bar. Even the headers and columns are misaligned as shown below :
Please advise.
My code given below :-
<p-table [columns]="cols" [value]="cars2" [scrollable]="true" [style]="{width:'300px'}">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:150px">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
The prime ng related packages that are included in my project:
"primeflex": "1.1.0",
"primeicons": "^2.0.0",
"primeng": "^9.1.3",
The reason was because "node_modules/primeng/resources/primeng.css" entry was missing in angular.json/styles section.
Hello I was having the same trouble this is from the official doc
link: http://primefaces.org/primeng/table/scroll
<div class="card">
<h5>Vertical</h5>
<p-table [value]="customers" [scrollable]="true" scrollHeight="400px">
<ng-template pTemplate="header">
<tr>
<th style="min-width:200px">Name</th>
<th style="min-width:200px">Country</th>
<th style="min-width:200px">Company</th>
<th style="min-width:200px">Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td style="min-width:200px">{{customer.name}}</td>
<td style="min-width:200px">{{customer.country.name}}</td>
<td style="min-width:200px">{{customer.company}}</td>
<td style="min-width:200px">{{customer.representative.name}}</td>
</tr>
</ng-template>
</p-table>
</div>

How to bind table values using data-ng-start and end conditions in AngularJs

I need to bind data with row values to a table, when i'm using the data-ng-repeat-start and data-ng-repeat-end data is not binding correct format.
<table id="tbl">
<tbody>
<tr data-ng-repeat="data in RDetails" data-ng-if="Values(data)">
<td data-ng-repeat-start="d in data.Dtls" data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.V}}</span>
</td>
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.VP}}</span>
</td>
<td data-ng-if="ShowValuesBL(d)">
<span>{{d.AV}}</span>
</td>
<td data-ng-repeat-end="d in data.Dtls" data-ng-if="Values(d)">
<span>{{d.AVP}}</span>
</td>
</tr>
</tbody>
</table>
when I use the above condition table showing the same values how can i do this. Where i did mistake please help me on this Please see image here i am getting repeated values.
If I understand your problem correctly - just presenting content of every RDetails.Dtls element as a table row - here is solution:
<table id="tbl">
<tbody data-ng-repeat="data in RDetails">
<tr data-ng-repeat="d in data.Dtls" data-ng-if="Values(data)">
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.V}}</span>
</td>
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.VP}}</span>
</td>
<td data-ng-if="ShowValuesBL(d)">
<span>{{d.AV}}</span>
</td>
<td data-ng-if="Values(d)">
<span>{{d.AVP}}</span>
</td>
</tr>
</tbody>
</table>

Update row in Angular JS

I am submiting a form using Angular JS and Web service. Here is code-
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="EmpName" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="EmpAge" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="EmpCity" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
I want to make these text boxes reusable on Edit i.e. on edit click corresponding rows item must be filled and the Save button should now be working like Update button.
How can I do it?
Alternatively How can I make row editable?
Ideally you would wanna create the models as
Employee.Name , Employee.Age , Employee.City
Now
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="Employee.Name" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="Employee.Age" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="Employee.City" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<button type="button" id="btnSubmit" ng-click="saveEmployee()">{{Employee.id ? "Edit" : "Create"}}</button>
</td>
</tr>
</table>
In the Controller
$scope.saveEmployee = function(){
if($scope.Employee.id){
// Id will be present for a existing employee
// update the Employee
}else {
// Id not present
// create the employee
}
}
I would have an Employee.save() in the model which can identify weather to save or update the Employee

Angular - how to use ng-repeat value as variable

I'm trying to leverage "column" as a number and re-use it to define the "colspan" in the following "td".
<table>
<tr>
<td ng-repeat="column in columns">
{{column}}
</td>
<td colspan="column">
Something
</td>
</tr>
</table>
Not sure if thats what you meant but you can try the following:
<table>
<tr>
<td ng-repeat-start="column in columns">
{{column}}
</td>
<td ng-repeat-end colspan="{{column}}">
Something
</td>
</tr>
</table>

Resources