check if primeNG checkbox checked or unchecked.
I am using primenNG 5.
https://www.primefaces.org/primeng-5.2.7/#/table/selection
<p-table [columns]="cols" [value]="cars" [(selection)]="selectedCars3" dataKey="vin">
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 3em">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td>
<p-tableCheckbox [value]="rowData" (click)="onRowSelect($event)"></p-tableCheckbox>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="summary">
<ul>
<li *ngFor="let car of selectedCars3" style="text-align: left">
{{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}
</li>
</ul>
</ng-template>
</p-table>
Related
I am using prime ng table with row expansion, but I think the problem is with my data key. row is not expanding when I use dataKey="id" if I use Munit.id all rows expand instead of one
html file
<p-table #dt dataKey= "id" [columns]="cols" [value]="mUnit" [paginator]="true" [rows]="5" [showCurrentPageReport]="true"
paginatorright currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[rowsPerPageOptions]="[5,10,15]" [globalFilterFields]="['mUnitName']" rowExpandMode="single" expandableRows="true"
styleClass="p-datatable-striped" #tableContextMenu>
<ng-template pTemplate="caption" class=" hidden">
<div class=" grid justify-content-between ">
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')"
placeholder="Search keyword" />
</span>
<span class="wrap ml-auto ">
<button mat-button class='bd ' (click)="routed()">Add</button>
<button mat-button class='bd' (click)="print()">Print</button>
</span>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<!-- <th pSortableColumn="id">ID <p-sortIcon field="id"></p-sortIcon></th>
<th pSortableColumn="Name">ID <p-sortIcon field="mUnitName"></p-sortIcon></th> -->
<th style="width: 2.25e ml"></th>
<th *ngFor="let col of columns" pSortableColumn="{{col.field}}">
{{col.header}}
<p-sortIcon field="{{col.field}}"></p-sortIcon>
<p-columnFilter type="text" field="{{col.field}}" display="menu"></p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-expanded="expanded">
<tr>
<!-- (click)="showIt(rowData)" -->
<td>
<button type="button" pButton pRipple [pRowToggler]="columns"
class="p-button-text p-button-rounded p-button-plain"
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
<tr>
<td colspan="3">
<div class="p-3">
<div>its row</div>
<p-table [value]="mUnit" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of columns" pSortableColumn="{{col.field}}">
{{col.header}}
<p-sortIcon field="{{col.field}}"></p-sortIcon>
<p-columnFilter type="text" field="{{col.field}}" display="menu"></p-columnFilter>
</th>
<th style="width: 4rem"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
(click)="showIt(rowData)"
<td>
<button type="button" pButton pRipple [pRowToggler]="rowData"
class="p-button-text p-button-rounded p-button-plain"
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="6">There are no order for this product yet.</td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>
</p-table>
my ts. file
showData() {
this.MUnitService.getData().subscribe(
(data: any) => {
if (data) {
this.mUnit = data
this.cols = [
{ field: 'id', header: 'ID' },
{ field: 'mUnitName', header: 'Name' },
];
}
}
);
showData is called in ngOnInit()
you must repeat dataKey= "id" of your table
<p-table #dt dataKey= "id"
in
<ng-template pTemplate="rowexpansion" dataKey= "id"
I hope and serve you.
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>
My tables do not appear in Firefox. I saw that there is a compatibility problem with Firefox with AngularJS, what can I do?
Follow the code.
<table class="displayTagCss">
<thead>
<th style="width: 50px;"> </th>
<th style="width: 50px;">Ordem</th>
<th>Alertas</th>
<th>Proposição</th>
<th>Situação</th>
<th style="width: 50px;"> </th>
</thead>
<tbody>
<tr ng-repeat="proposicao in gruposSentencas['<c:out value='${grupo.idSentencaDePesquisa}' />']">
<td style="text-align: center;">
<img alt="Subir" title="Subir" ng-show="!$first" src="<html:rewrite page='/imagens/botao_subir.gif' />" ng-click="subirProposicao('<c:out value='${grupo.idSentencaDePesquisa}' />', $index)" />
<img alt="Descer" title="Descer" ng-show="!$last" src="<html:rewrite page='/imagens/botao_descer.gif' />" ng-click="descerProposicao('<c:out value='${grupo.idSentencaDePesquisa}' />', $index)" />
</td>
<td style="text-align: center;">{{$index+1 }}</td>
<td>
<div class="hover" ng-if="(proposicao.alertas.length > 0) || proposicao.haPendencia">
<img src="<html:rewrite page='/imagens/gfx/warning.png'/>" />
<div class="appear">
<ul>
<li class="alerta_proposicao" ng-repeat="alerta in proposicao.alertas">{{ alerta }}</li>
<li class="alerta_proposicao" ng-if="proposicao.haPendencia"><span>Observações de fase: </span>{{proposicao.textoObservacao}}</li>
</ul>
</div>
</div>
</td>
<td>{{ proposicao.identificadorDaProposicao }}</td>
<td>{{ proposicao.situacao }}</td>
<td style="text-align: center;"><img src="<html:rewrite page='/imagens/chk_off.png' />" ng-click="removerProposicao('<c:out value='${grupo.idSentencaDePesquisa}' />', $index)" alt="Excluir" title="Excluir" /></td>
</tr>
</tbody>
</table>
The 'thead' works, but the 'tbody' does not appear in Firefox.
I have the table structured below
<table class="table">
<thead>
<tr>
<th class="checkbox-column"></th>
<th class="main-column main-column--checkbox">Name</th>
</tr>
</thead>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW2</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW1</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
</table>
I have got the root table element by using the below answer https://stackoverflow.com/a/41129924/2833311
But failing to get the nested repeater elements.
getSpecificNestedCell: function(tableObject, rowText, nestedTableObj, rowText1, columnCss) {
var ele = element.all(by.repeater(tableObject)).filter(function(rowElement){
return rowElement.element(by.css("td h4")).getText().then(function(text){
return text.indexOf(rowText) !== -1;
});
}).first();
ele = ele.all(by.repeater(nestedTableObj)).filter(function(rowElement1){
return rowElement1.element(by.linkText(rowText1)).getText().then(function(text1){
return text1.indexOf(rowText1) !== -1;
});
}).first().element(by.css('[' + columnCss + ']'));
findObject.waitUntilReady(ele);
return ele; }
Where as,
tableObject ==> (a, b) in tests
rowText ==> ROW2
nestedTableObj ==> test in testData
rowText1 ==> test.data
columnCss ==> ng-click="checkFunction()"
Using the above code I could able to get the element if it has the single row inside the nested repeated, but it was failing to get the element when the nested repeater has the multiple rows
this should give you what you want I believe
function getSpecificNestedCell(tableObject, rowText, nestedTableObj, rowText1, columnCss) {
return element(by.cssContainingText('tbody[ng-repeat="' + tableObject + '"]', rowText))
.element(by.cssContainingText('tr[ng-repeat="' + nestedTableObj + '"]', rowText1))
.element(by.css('[' + columnCss + ']'));
}
Here is the selector I used working
I have the existing method like below,
getSpecificCell: function(tableObject, rowNumber, columnCss) {
var ele = element(by.repeater(tableObject).row(rowNumber)).element(by.css('[' + columnCss + ']'));
return ele;
}
Is that possible to do the same using the row text instead of rowNumber?
Form the below html I need to get the column value without using the row number
HTML sample:
<table class="table">
<thead>
<tr>
<th class="checkbox-column"></th>
<th class="main-column main-column--checkbox">Name</th>
</tr>
</thead>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW2</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW1</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
</table>
You can use filter() method to filter the array of WebElement. have a look at below example,
getSpecificCell: function(tableObject, expectedRowValue, columnCss) {
var ele =element.all(by.repeater(tableObject).filter(function(rowElement){
return rowElement.element(by.css("td h4")).getText().then(function(rowValue){
return rowValue == expectedRowValue;
})
}).first().element(by.css('[' + columnCss + ']'));
return ele;
}