Primeng: LazyLoad event triggered by moving horizontal scrollbar

[jose-barata]

[x] bug report
[ ] feature request
[ ] support request

Current behavior
I have a lazyloaded table that can be scrolled both vertically and horizontally. I can scroll the table vertically and horizontally without any issues until I reach the bottom end of my table. The loadDataOnScroll($event) method gets called every time the vertical scrollbar is used and we can use the table horizontal scrollbar without loadDataOnScroll($event) getting called. However if we reach the end of dataset (bottom end of the table) and we decide to move the horizontal scrollbar the loadDataOnScroll($event) method is called when it shouldn't be.

Table configuration:

  <p-table
    [columns]="cols"
    [value]="virtualTableData"
    [scrollable]="true"
    [rows]="rows"
    [scrollHeight]="scrollHeight"
    [virtualScroll]="true"
    (onLazyLoad)="loadDataOnScroll($event)"
    [lazy]="true"
    [totalRecords]="totalRecords"
    [loading]="loading"
    [customSort]="true"
    [resizableColumns]="true"
    columnResizeMode="expand"
    [reorderableColumns]="true"
    [resetPageOnSort]="false"
    [lazyLoadOnInit]="false"
  >
    <ng-template pTemplate="colgroup" let-columns>
      <colgroup>
        <col *ngFor="let col of columns" />
      </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th
          *ngFor="let col of columns"
          [pSortableColumn]="col.fieldId"
          [ngStyle]="{ width: columnSize, 'white-space': 'nowrap', 'text-overflow': 'ellipsis' }"
          pResizableColumn
          pReorderableColumn
        >
          <span [attr.title]="getTooltip(col)">
            {{ col.name }}
            <p-sortIcon [field]="col.fieldId"></p-sortIcon>
          </span>
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr style="height:28px">
        <td
          *ngFor="let col of columns"
          [ngStyle]="{
            background: col.dataType == 'COLOR' ? (rowData[col.id] | boxColour).colour : 'none',
            'text-align': col.dataType == 'INT' || col.dataType == 'NUMBER' ? 'right' : 'left',
            width: columnSize,
            'white-space': 'nowrap',
            'text-overflow': 'ellipsis'
          }"
          [ngSwitch]="col.dataType"
          class="ui-resizable-column"
        >
          <ng-container *ngSwitchCase="'INT'">
            {{ rowData[col.id] | boxDecimal: currentLocale:col.format || user.numberFormat }}
          </ng-container>
          <ng-container *ngSwitchCase="'NUMBER'">
            {{ rowData[col.id] | boxDecimal: currentLocale:col.format || user.numberFormat }}
          </ng-container>
          <ng-container *ngSwitchCase="'DATE'">
            {{ rowData[col.id] | boxDate: col.format || user.dateFormat }}
          </ng-container>
          <ng-container *ngSwitchCase="'COLOR'"> {{ (rowData[col.id] | boxColour).name }} </ng-container>
          <ng-container *ngSwitchCase="'BOOLEAN'">
            <input type="checkbox" [checked]="rowData[col.id]" onclick="return false;"
          /></ng-container>
          <ng-container *ngSwitchDefault>{{ rowData[col.id] }}</ng-container>
        </td>
      </tr>
    </ng-template>
  </p-table>

Expected behavior
When the end of the dataset (bottom end of the table) is reached and we decide to move the horizontal scrollbar the loadDataOnScroll($event) method is not called.

• Angular version: 7.0.2
• PrimeNG version: 7.0.5
• Browser: [all]
• Node (for AoT issues): node --version = v10.15.0

[roukaour]

Our current workaround for this issue, in terms of @jose-barata 's sample code, is to introduce a this.curFirst cache value. The loadDataOnScroll handler compares its $event argument's first property with this.curFirst and exits early if they match. If they do not match, it lazy-loads the data and sets this.curFirst to $event.first.

This is not 100% satisfactory, since getting this to coexist with a Refresh Table feature (which does not alter the first row, just like horizontal scrolling, but should reload the data anyway) requires extra code.

[filip12345678910]

I made a preview https://stackblitz.com/edit/github-sxsjrz?file=src%2Fapp%2Fapp.component.html

[fhljys]

Is there any update for this issue?

[pete4dev]

Same issue. Any update?

[fhljys]

@pete4dev, finally, I decided to write my own sort event inside of using the built-in sort.

[FranBor]

I have the same issue.

Angular version: 8.0.0
PrimeNG version: 8.0.0

[cagataycivici]

Reviewing for 9.0.1

[cagataycivici]

I could not replicate however added a check to lazy load on vertical scroll only.