PrimeNG VirtualScroller in TabView not working out properly

Question

I have a VirtualScroller in my Angular 7 Application that is sadly not rendering all items when initiated.

This is the code for it:

<p-virtualScroller [value]="financialItems" scrollHeight="400px" [itemSize]="150">
    <p-header>
        <div class="ui-g">
            <div class="ui-g-12 title-container">
                Title
            </div>
        </div>
    </p-header>
    <ng-template let-psp pTemplate="item">
        <div class="ui-g psp-item">
            <div class="ui-g-12 ui-md-1">
                <div style="font-size: 16px; text-align: left; margin-top: 15px;">Number:</div>
                <div style="font-size: 16px; text-align: left; margin-top: 15px;">Number:</div>
                <div style="font-size: 16px; text-align: left; margin-top: 15px;">Hint:</div>
            </div>
            <div class="ui-g-12 ui-md-3">
                <div style="font-size: 16px; text-align: left; font-weight: bold; margin-top: 15px;">{{ psp.orderNumber }}</div>
                <div style="font-size: 16px; text-align: left; margin-top: 15px; font-weight: bold;">{{ psp.pspNumber }}</div>
                <div style="font-size: 16px; text-align: left; margin-top: 15px; font-weight: bold;">{{ psp.hint }}</div>
            </div>
            <div class="ui-g-12 ui-md-3">
                <div class="ui-g">
                    <div class="ui-g-3 ui-sm-6">Dauer: </div>
                    <div class="ui-g-8 ui-sm-6">{{psp?.startDate.toLocaleString('de-DE', { year: 'numeric', month: 'numeric', day: 'numeric' })}} - {{psp?.endDate.toLocaleString('de-DE', { year: 'numeric', month: 'numeric', day: 'numeric' })}}</div>

                    <div class="ui-g-3 ui-sm-6">TCV: </div>
                    <div class="ui-g-8 ui-sm-6">{{psp?.planRevenue | number:'1.2-2':'de'}}</div>

                    <div class="ui-g-3 ui-sm-6">Kosten: </div>
                    <div class="ui-g-8 ui-sm-6">{{psp?.planCosts | number:'1.2-2':'de'}}</div>

                    <div class="ui-g-3 ui-sm-6">Stunden: </div>
                    <div class="ui-g-8 ui-sm-6">{{psp?.totalHours | number:'1.2-2':'de'}}</div>
                </div>
            </div>
            <div class="ui-g-12 ui-md-3">
                <div class="ui-g">
                    <div class="ui-g-6 ui-sm-6">Eigenumsatz: </div>
                    <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.planOwnRevenue | number:'1.2-2':'de'}}</div>

                    <div class="ui-g-6 ui-sm-6">Nichteigener Umsatz: </div>
                    <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.planOtherRevenue | number:'1.2-2':'de'}}</div>

                    <div class="ui-g-6 ui-sm-6">DB1-Kosten: </div>
                    <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.costDB1 | number:'1.2-2':'de'}}</div>

                    <div class="ui-g-6 ui-sm-6">DB2-Kosten: </div>
                    <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.costDB2 | number:'1.2-2':'de'}}</div>
                </div>
            </div>
            <div class="ui-g-12 ui-md-2">
                <div class="ui-g center-div">

                    <div class="ui-g-6 ui-sm-6">Gewährleistung: </div>
                    <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.planWarranty | number:'1.2-2':'de'}}</div>

                    <div class="ui-g-6 ui-sm-6">Risiko: </div>
                    <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.planRisk | number:'1.2-2':'de'}}</div>
                </div>
            </div>
        </div>
    </ng-template>
</p-virtualScroller>

That is called inside a tabView:

<p-tabView class="main-tab-view" [style]="{'heigth':'100%'}">
    <p-tabPanel header="TestVS">
        <app-virtual-scroller></app-virtual-scroller>
    </p-tabPanel>
</p-tabView>

My component:

private financialItems: FinancialItem[] = [];

ngOnInit() {
    this.initTestData();
}

  initTestData() {
    this.financialItems.push(new FinancialItem("Nr.1", new Date("2018-12-01"), new Date("2018-12-31"), 10.00, "Ein Hinweis",
    'Test', "12345678", 180, 13500, 10, 170, 5940, 1000, 6940, 0.0, 0.0, 0.0, 13500));
    this.financialItems.push(new FinancialItem("Nr.2", new Date("2018-12-01"), new Date("2018-12-31"), 10.00, "Ein Hinweis",
    'Test', "12345678", 180, 13500, 10, 170, 5940, 1000, 6940, 0.0, 0.0, 0.0, 13500));
    this.financialItems.push(new FinancialItem("Nr.3", new Date("2018-12-01"), new Date("2018-12-31"), 10.00, "Ein Hinweis",
    'Test', "12345678", 180, 13500, 10, 170, 5940, 1000, 6940, 0.0, 0.0, 0.0, 13500));
  }

Now on executing the code and opening the tab I see the VirtualScroller - but not alle elements are visible right away. Yet, the element is long enough, so that all elements should be existing.

This is the view:

The last element is not visible, but it is existing and rendered. When I use ng serve I can see that element.

Now on scrolling on the non-visible items are rendered, but the bottom (the part being invisible now) stays not visible. When I remove the p-tabView around the item it is completely visible. How can I fix this? I'd like to keep it in a tab-view.

Have you been able to solve the issue? Facing the same problem... — user1839433

user1839433 user1839433 · Accepted Answer · 2019-06-06T09:00:12

I just found a workaround for the issue. The key is to load the virtual scroll using ngIf just when the tab is selected. For your example this means:

<p-tabView (onChange)="changeTab($event)" class="main-tab-view" [style]="{'heigth':'100%'}">
<p-tabPanel header="TestVS">
    <app-virtual-scroller *ngIf="scrollTabSelected"></app-virtual-scroller>
</p-tabPanel>

And in the component:

changeTab(ev) {
  this.scrollTabSelected = ev.index === 1;
}

Change the index to the index of the tab which contains the virtual scroll. I haven't tested the solution if the virtual scroll is in the first tab.

PrimeNG VirtualScroller in TabView not working out properly

1 Answers