Scroll Issue When Resolution Scale Change to 125% (1920x1080)

[Nagendra Gupta]

Hello Team,

I am sending request to server for fetching next 15 record to bind my multiselect, its working fine in 100% resolution mode, but once I change my resolution scale to 125%. My scroll event not executing , the scrollTop and OffsetHeight is not matching the scenario.  I am using row template with multiple column

SCale & Layout

Code Snap

public onOpen(args) {

 if (!this.isScrollEventBound) {

            this.isScrollEventBound = true;

            let listElement: any = (this.cmbObj as any).list;

            listElement.addEventListener('scroll', this.scrollEvent,);

            listElement.parent = this;

        }

        this.isPopupOpened = true;

    }

}

scrollEvent(args) {

        let start1 = 15;

        let end1 = 30;

        let listElement: any = args.currentTarget;

        let parent: any = args.currentTarget.parent;

        if (listElement.scrollTop + listElement.offsetHeight >= listElement.scrollHeight

        ) {

            let filterQuery = parent.cmbObj.query.clone();

            parent.dataManager

                .executeQuery(filterQuery.range(parent.start, parent.end))

                .then((event: any) => {

                    parent.start = parent.end;

                    parent.end += 15;

                    if (event.result.length > 0) {

                        event.result = parent.getUniqueDataArray(event.result, parent.control.AutoCompleteModel.Data)

                        parent.control.AutoCompleteModel.Data = parent.control.AutoCompleteModel.Data.concat(event.result);

                        parent.cmbObj.addItem(event.result as { [key: string]: Object }[], parent.cmbObj.getItems().length);

                        parent.getSelectedValue();

                    }

                })

                .catch((e: Object) => { });

        }

    }

Visu

[Ponmani Murugaiyan]

Hi Nagendra, 

Thanks for contacting Syncfusion support. 

We able to replicate the reported issue with your provided resolution due to ‘if’ condition gets failed in some cases. So, we have modified the code to achieve virtual scrolling which supports all resolution. Please modify the below highlighted code snippet to get rid of the reported issue. 

public onOpen(args) { 

    let start: number = 9; 

    let end: number = 14; 

    let listElement: HTMLElement = (this.dropdownObj as any).list; 

    listElement.addEventListener('scroll', () => { 

      if (listElement.scrollTop + listElement.offsetHeight +  

              listElement.parentElement.querySelector('.e-filter-parent').offsetHeight >= listElement.scrollHeight) { 

        let filterQuery = this.dropdownObj.query.clone(); 

        this.data.executeQuery(filterQuery.range(start, end)).then((event: any) => { 

            start = end; 

            end += 5; 

            this.dropdownObj.addItem(event.result as { [key: string]: Object; }[]); 

          }).catch((e: Object) => {}); 

      } 

    }); 

  } 

Sample: https://stackblitz.com/edit/angular-guucqq-9qfh8t?file=app.component.ts 

Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Nagendra Gupta]

Hello  Ponmani,

Thanks for your kind update, your provided code working fine in 125% but somehow it create problem in normal case. Sometime it fire scroll event every but some time skipped not firing the scroll event. 

[Berly Christopher]

Hi Nagendra, 

  

We were checked the sample both in 125%, 100% and 150% screen resolution. But the reported issue does not occurred at our end. So, we have taken video demonstration and attached it below. 

  

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/virtual_scroll121649387  

  

So, please share the issue reproducing case that will help us to check and proceed further from our end. 

  

Regards, 

Berly B.C 

[Nagendra Gupta]

Hi Berly,

Thanks for your kind update, we missed some code snipped. Now Your provided solution perfectly working. 

Thanks again for your quick support and Help

[Berly Christopher]

Hi Nagendra, 

  

We are glad to know that the issue is resolved in your end. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C