TurboTable with virtualScroll not display records when totalRecords is set after ngOnInit

[lukgit17]

[ X ] bug report => Search github for a similar issue or PR before submitting

Current behavior

TurboTable display zero records when totalRecords is set when table it's fill and not in ngOnInit. Without this feature I cannot migrate to TurboTable. In all projects totalRecords it's initialized dynamically when records and total of records are received from server request.

Example :

        <p-table [value]="comenziMaterii" selectionMode="single" [(selection)]="selectedComanda" [loading]="loadingData" scrollHeight="650px" [scrollable]="true" [lazy]="true" [rows]="querySearch.rows/2" [virtualScroll]="true" (onLazyLoad)="loadComenziLazy($event)"
            (onRowSelect)="onRowSelect($event)" [totalRecords]="totalRecords" sortMode="multiple" #tt>
            <ng-template pTemplate="caption">
                <div class="ui-g ui-g-nopad p-header">
                    <span class="ui-g-6 ui-g-nopad">Comenzi Materii Prime</span>

                    <ul class="ui-g-6 ui-g-nopad p-header-items">
                        <li *ngIf="!loadingData" class="ui-g-nopad">
                            <a (click)="showHiddenFields = !showHiddenFields; (showHiddenFields) ? classExpand = 'ui-lg-12 ui-md-12 ui-sm-12' : classExpand = 'ui-lg-8 ui-md-7 ui-sm-12'">
                                <i class="p-header-icon material-icons">code</i>
                            </a>
                        </li>
                        <li *ngIf="!loadingData && idStatus == 1" class="ui-g-nopad">
                            <a pTooltip="Adauga Comanda Materii" tooltipPosition="left" showDelay="1000" (click)="showComandaDlg(true)">
                                <i class="p-header-icon material-icons">add_circle</i>
                            </a>
                        </li>
                        <li class="ui-g-nopad">
                            <i class="p-header-icon material-icons"></i>
                        </li>
                        <li *ngIf="!loadingData" class="ui-g-12 ui-lg-8 ui-md-7 ui-sm-8 ui-g-nopad">
                            <div class="ui-inputgroup">
                                <input #gb type="text" placeholder="Cauta" pInputText (input)="tt.filterGlobal($event.target.value, 'contains')">
                                <span class="ui-inputgroup-addon">
                                    <i class="p-header-icon material-icons">search</i>
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th [style]="{'width':'5%','text-align':'center'}" [pSortableColumn]="id">Id</th>
                    <th [style]="{'width':'35%'}" [pSortableColumn]="id">Denumire Furnizor</th>
                    <th [style]="{'width':'20%','text-align':'center'}" [pSortableColumn]="dataComanda">Data Comanda</th>
                    <th [style]="{'width':'20%','text-align':'center'}" [pSortableColumn]="numar">Numar</th>
                    <th *ngIf="showHiddenFields" [style]="{'width':'10%','text-align':'center'}">Tip Plata</th>
                    <th styleClass="col-button" [style]="{ 'width': '6%', 'text-align': 'center'}">
                        <a pTooltip="Reactualizeaza" tooltipPosition="left" showDelay="1000" [life]="4000" (click)="fillComenzi()">
                            <i class="mdi mdi-sync mdi-21px"></i>
                        </a>
                    </th>
                </tr>
                <tr>
                    <th></th>
                    <th>
                        <input pInputText type="text" (input)="tt.filter($event.target.value, 'denumireFurnizor', 'contains')">
                    </th>
                    <th>
                        <div class="ui-g-12">
                            <a pTooltip="Filtreaza" tooltipPosition="left" showDelay="1000 " (click)="showFilterDlg($event)">
                                <i class="mdi mdi-filter mdi-21px"></i>
                            </a>
                        </div>
                    </th>
                    <th>
                        <input pInputText type="text" (input)="tt.filter($event.target.value, 'numar', 'contains')">
                    </th>
                    <th *ngIf="showHiddenFields">
                        <input pInputText type="text" (input)="tt.filter($event.target.value, 'denumireTipPlata', 'contains')">
                    </th>
                    <th></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-comanda>
                <tr>
                    <td>{{comanda.idComanda}}</td>
                    <td>{{comanda.denumireFurnizor}}</td>
                    <td>{{comanda.dataComanda | date: 'dd/MM/yyyy'}}</td>
                    <td>{{comanda.numar}}</td>
                    <td *ngIf="showHiddenFields">{{comanda.denumireTipPlata}}</td>
                    <td>
                        <a pTooltip="Detalii Comanda" tooltipPosition="left" showDelay="1000" [life]="4000" (click)="showLiniiComandaDlg()">
                            <i class="mdi mdi-information-variant mdi-21px "></i>
                        </a>
                    </td>
                </tr>
            </ng-template>
        </p-table>



Angular version: 5.2.0

PrimeNG version: 5.2.1 

[Noctis-Solaith]

Same problem.

[lukgit17]

Resolve is to add code line
this.virtualScrollerViewChild.nativeElement.style.height = this.dt.totalRecords * this.dt.virtualRowHeight + 'px';
in next code in table.js:

ScrollableView.prototype.onBodyScroll = function(event) {
     var _this = this;
     if (this.scrollHeaderViewChild && this.scrollHeaderViewChild.nativeElement) {
         this.scrollHeaderBoxViewChild.nativeElement.style.marginLeft = -1 * this.scrollBodyViewChild.nativeElement.scrollLeft + 'px';
     }
     if (this.scrollFooterViewChild && this.scrollFooterViewChild.nativeElement) {
         this.scrollFooterBoxViewChild.nativeElement.style.marginLeft = -1 * this.scrollBodyViewChild.nativeElement.scrollLeft + 'px';
     }
     if (this.frozenSiblingBody) {
         this.frozenSiblingBody.scrollTop = this.scrollBodyViewChild.nativeElement.scrollTop;
     }
     if (this.dt.virtualScroll) {
         **this.virtualScrollerViewChild.nativeElement.style.height = this.dt.totalRecords * this.dt.virtualRowHeight + 'px';**

         var viewport = this.domHandler.getOuterHeight(this.scrollBodyViewChild.nativeElement);
         var tableHeight = this.domHandler.getOuterHeight(this.scrollTableViewChild.nativeElement);
         var pageHeight_1 = 28 * this.dt.rows;
         var virtualTableHeight = this.domHandler.getOuterHeight(this.virtualScrollerViewChild.nativeElement);
         var pageCount = (virtualTableHeight / pageHeight_1) || 1;
         var scrollBodyTop = this.scrollTableViewChild.nativeElement.style.top || '0';
         if ((this.scrollBodyViewChild.nativeElement.scrollTop + viewport > parseFloat(scrollBodyTop) + tableHeight) || (this.scrollBodyViewChild.nativeElement.scrollTop < parseFloat(scrollBodyTop))) {
             var page_1 = Math.floor((this.scrollBodyViewChild.nativeElement.scrollTop * pageCount) / (this.scrollBodyViewChild.nativeElement.scrollHeight)) + 1;
             this.dt.handleVirtualScroll({
                 page: page_1,
                 callback: function() {
                     _this.scrollTableViewChild.nativeElement.style.top = ((page_1 - 1) * pageHeight_1) + 'px';
                     if (_this.frozenSiblingBody) {
                         _this.frozenSiblingBody.children[0].style.top = _this.scrollTableViewChild.nativeElement.style.top;
                     }
                 }
             });
         }
     }
 };

[Abhi-99]

@Noctis-Solaith
Came across the same issue and found out that totalRecords are not getting updated at first . Tried to set totalRecords via the table instance followed by its updateRecord method but it did not help.

Finally did some hack to rerender the view based on a flag value as below
<p-table *ngIf = "render" [value]="values" [totalRecords]="totalRecords" ... >

In component

ngOnInit(){
  this.totalRecords : number = 0;
  this.render : boolean = true;
}

modifyRecords(records){
  this.render = false;
  this.values = records;
  this.totalRecords = records.length;
  setTimeout(() => {
    this.render = true;
   },0);
}

This solution may not be idealistic , but it worked perfectly for me without any performance issue.

[lukgit17]

Hope will have accepted pull request #5319
TurboTable with virtualScroll not display records when totalRecords is set after ngOnInit - patch 2 with Observable has resolve this problem.