How to convert asp.net zero angular primeng-datatable to grouping primeng-table datatable. #7504

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 !!