primeng p-virtualScroller empty list items and scrollbar issue

Question

I am using primeng p-virtualScroller for implementing loading data with scroller.It is working fine.But I am facing the below issue: When the search result is less still it shows the scroller and emplty list items. Below is the code I am using in Html:

 <p-virtualScroller  [(value)]="employeeList" scrollHeight="300px" [itemSize]="20" [rows]="pageSize"
            [(lazy)]="lazyLoading" (onLazyLoad)="loadCarsLazy($event)" [(totalRecords)]="totalEmployees">

            <ng-template let-emp pTemplate="emptymessage" *ngIf="searchResultMsg">
                <span>{{searchResultMsg}}</span>
            </ng-template>
            <ng-template let-emp pTemplate="item" let-odd = odd  *ngIf="searchResultMsg===''">
                <div (click)="selectEmployee(emp)" class="pl-2 search-list"  [class.odd-row]="odd">{{emp.name}} </div>

            </ng-template>

        </p-virtualScroller>

Below is the issue I want to explain(see the screen shot)

score 0 · Answer 1 · answered Jun 17 '20 at 11:27

I got the solution to fix the above issue. I update the value of pageSize variable according to the total records available return by API(COUNT)

Code:

  callAPIToSearch(searchValue, rowOffset) {
if (!this.isProcessing) {
  this.isProcessing = true;
  this.empService.searchEmployees(searchValue, rowOffset, this.pageSize).subscribe((apiResp: EmployeeSearchAPIResponse) => {
    if (rowOffset == 0 && apiResp.response.COUNT === 0) {
      this.searchResultMsg = `No record found, Please enter Relationship Manager's Surname and try again.`;
    } else {
      this.totalEmployees = apiResp.response.COUNT;
      if (apiResp.response.COUNT <= 100) {
        this.pageSize = apiResp.response.COUNT
      } else{
        this.pageSize =100;
      }
      this.employeeList = apiResp.response.employees;
    }
    this.isProcessing = false;
  })
} }

primeng p-virtualScroller empty list items and scrollbar issue

1 Answers1