PrimeNg Turbo Table p-table lazy load scroll event

Question

I am implementing primeNG turbo table. I am able to implement it but while implementing lazy loading. iam not been able to get scroll event. How to get scroll event in my method. Below is what i have tried.

<p-table #dt 
          dataKey="id"
          [columns]="columns" 
          [value]="gridData" 
          [scrollable]="true" 
          sortMode="single"
          scrollHeight="500px" 
          *ngIf="isDataLoading" 
          (onLazyLoad)="loadDataOnScroll($event)" 
          [lazy]="true" 
          [rows]="25" 
          [totalRecords]="recordTotal"
          [(selection)]="selectedRows" 
          (onRowSelect)="onRowSelect($event)" 
          (onRowUnselect)="onRowUnselect($event)" 
          (onHeaderCheckboxToggle)="onHeaderCheckboxToggle($event)"
          selectionMode="multiple"
          [virtualScroll]="true" >

</p-table>

method to get lazyload event.

loadDataOnScroll1(event: LazyLoadEvent) {

          let firstTime: boolean;
          let onScroll: boolean;
          let onSort: boolean;
          let globalSearch: boolean;

          console.log(event);
          if (event.globalFilter == null && !event.filters.hasOwnProperty('global') &&
               event.hasOwnProperty('sortField') && event.sortField == undefined) {
               firstTime = true;
               console.log('user iscoming for the first time ');
          } else if (event.globalFilter != null && event.globalFilter.length > 0 && event.filters.hasOwnProperty('global') &&
               !event.hasOwnProperty('sortField')) {
               globalSearch = true;
               console.log('user is doing only global search');
          } else if (event.hasOwnProperty('sortField') && event.sortField != undefined && event.globalFilter == null && !event.filters.hasOwnProperty('global')) {
               onSort = true;
               console.log('user is doing sorting');
          } else if (event.hasOwnProperty('sortField') && event.globalFilter != null && event.filters.hasOwnProperty('global')) {
               globalSearch = true;
               onSort = true;
               console.log('user is doing global search along with sort');
          } else {
               console.log('user is doing onscroll so do increment for page number');
               // here we need to take entire event and get all possible values to call
               // get api and update grid data
               // 
          }

     }

I am able to get sort , filter , global search event but i am not been able to get scroll event.I want to get the event and call my service to get paginated data.

Thanks.

@Kukeltje then why does they say PrimeNg on their officiate website.https://www.primefaces.org/primeng/#/table — Ranveer Singh Rajpurohit, May 15 '18 at 05:16
Because when they started with the PrimeFaces **PRODUCT** they registered the primefaces.org url. When they also adopted the hyped client-side javascript frameworks, they abused the same url instead of registring primeng.org or whatver. Just because something is on the same url does not make it related to a product with that same name. If you just READ the info of the tags you use, you should see it is a product as wel. Reverted your edit! — Kukeltje, May 15 '18 at 05:34
@Kukeltje can you please help me in lazy load event , to get scroll event — Ranveer Singh Rajpurohit, May 17 '18 at 11:32

score 1 · Answer 1 · answered Jul 27 '18 at 02:56

1

i fix this problem with a trick. i set the totalRecords as a large number or a number much larger than your current data(e.g. the current data's length is 500, set the totalRecords as 1000), then the lazyloading will be triggered on each scroll

answered Jul 27 '18 at 02:56

user10139040

19
2

but how will you get to know the scroll event ? – Ranveer Singh Rajpurohit Jul 27 '18 at 05:13
Seems both sort and scroll will trigger onLazyLoad. Is there a way to distinguish them? – Fang Liu Aug 10 '19 at 11:37

PrimeNg Turbo Table p-table lazy load scroll event

1 Answers1