Hi ,
I am getting issue when adding grouping the to primeng-datatable. same like https://www.primefaces.org/primeng/#/table/rowgroup
Please suggenst any example or demo so that this datatable behaves like grouping (https://www.primefaces.org/primeng/#/table/rowgroup) primeng-datatable like below and its has to be maintain the functionality like pagination sorting etc in default primeng-table
**here is my code of angular componate html file **
<div class="primeng-datatable-container col-12" [busyIf]="primengTableHelper.isLoading"> <p-table #dataTable (onLazyLoad)="getCruiseDefaultSeasons($event)" [value]="primengTableHelper.records" rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true" [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive" [resizableColumns]="primengTableHelper.resizableColumns"> <ng-template pTemplate="header"> <tr> <th style="width: 130px" [hidden]="!isGrantedAny('Pages.CruiseDefaultSeasons.Edit', 'Pages.CruiseDefaultSeasons.Delete')"> {{l('Actions')}}</th> <th style="width: 150px" pSortableColumn="departureYear"> {{l('DepartureYear')}} <p-sortIcon field="cruiseDefaultSeasons.departureYear"></p-sortIcon> </th> <th style="width: 150px" pSortableColumn="seasonGroup"> {{l('SeasonGroup')}} <p-sortIcon field="cruiseDefaultSeasons.seasonGroup"></p-sortIcon> </th> <th style="width: 150px" pSortableColumn="departureDate"> {{l('DepartureDate')}} <p-sortIcon field="cruiseDefaultSeasons.departureDate"></p-sortIcon> </th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
<!-- <ng-container *ngIf='checkGroupInArray(record.cruiseDefaultSeasons.seasonGroup)'>
<tr >
<td colspan="4">
{{record.cruiseDefaultSeasons.seasonGroup}}
</td>
</tr>
</ng-container>-->
<tr>
<td style="width: 130px"
[hidden]="!isGrantedAny('Pages.CruiseDefaultSeasons.Edit', 'Pages.CruiseDefaultSeasons.Delete')">
<div class="btn-group dropdown" dropdown container="body">
<button class="dropdown-toggle btn btn-sm btn-primary" dropdownToggle>
<i class="fa fa-cog"></i><span class="caret"></span>
{{l("Actions")}}
</button>
<ul class="dropdown-menu" *dropdownMenu>
<li>
<a href="javascript:;"
(click)="viewCruiseDefaultSeasonsModal.show(record)">{{l('View')}}</a>
</li>
<li>
<a href="javascript:;"
*ngIf="permission.isGranted('Pages.CruiseDefaultSeasons.Edit')"
(click)="createOrEditCruiseDefaultSeasonsModal.show(record.cruiseDefaultSeasons.id)">{{l('Edit')}}</a>
</li>
<li>
<a href="javascript:;"
*ngIf="permission.isGranted('Pages.CruiseDefaultSeasons.Delete')"
(click)="deleteCruiseDefaultSeasons(record.cruiseDefaultSeasons)">{{l('Delete')}}</a>
</li>
<li>
<a href="javascript:;" *ngIf="entityHistoryEnabled"
(click)="showHistory(record.cruiseDefaultSeasons)">{{l('History')}}</a>
</li>
</ul>
</div>
</td>
<td style="width:150px">
<span class="ui-column-title"> {{l('DepartureYear')}}</span>
{{record.cruiseDefaultSeasons.departureYear}}
</td>
<td style="width:150px">
<span class="ui-column-title"> {{l('SeasonGroup')}}</span>
{{record.cruiseDefaultSeasons.seasonGroup}}
</td>
<td style="width:150px">
<span class="ui-column-title"> {{l('DepartureDate')}}</span>
<span *ngIf="record.cruiseDefaultSeasons.departureDate">
{{record.cruiseDefaultSeasons.departureDate | momentFormat:'L'}}
</span>
<span *ngIf="!record.cruiseDefaultSeasons.departureDate">-</span>
</td>
</tr>
</ng-template>
</p-table>
<div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
{{l('NoData')}}
</div>
<div class="primeng-paging-container">
<p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}" #paginator
(onPageChange)="getCruiseDefaultSeasons($event)"
[totalRecords]="primengTableHelper.totalRecordsCount"
[rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
</p-paginator>
<span class="total-records-count">
{{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
</span>
</div>
</div>
ts file code :--
getCruiseDefaultSeasons(event?: LazyLoadEvent) {
if (this.primengTableHelper.shouldResetPaging(event)) {
this.paginator.changePage(0);
return;
}
this.primengTableHelper.showLoadingIndicator();
this._cruiseDefaultSeasonsServiceProxy.getAll(
this.filterText,
this.primengTableHelper.getSorting(this.dataTable),
this.primengTableHelper.getSkipCount(this.paginator, event),
this.primengTableHelper.getMaxResultCount(this.paginator, event)
).subscribe(result => {
result.items.forEach(element => {
this.customSeasonGroupArray.push({
id: element.cruiseDefaultSeasons.id,
departureYear: element.cruiseDefaultSeasons.departureYear,
seasonGroup: element.cruiseDefaultSeasons.seasonGroup,
departureDate: element.cruiseDefaultSeasons.departureDate
});
});
this.isAddedInArray=[];
this.primengTableHelper.totalRecordsCount = result.totalCount;
this.primengTableHelper.records = result.items;
this.primengTableHelper.hideLoadingIndicator();
});
}
even I put the boolien function for the check true or false then give error..
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
its check value in grid loop ... true or false
Here is the code for the **GroupInArray **
checkGroupInArray(name: string): any {
console.log('name', name);
console.log('this.isAddedInArray', this.isAddedInArray);
console.log('this.isAddedInArray.some(x => x === name)', this.isAddedInArray.some(x => x === name));
if (this.isAddedInArray.some(x => x === name)) {
return true;
} else {
this.isAddedInArray.push(name);
return false;
}
}
Thanks in advance !!
