Get Data from server on scrolling

[Ibrahim özyurt]

 I want to implement infinite  or Virtual Scrolling in angular, want to make http call to get first 10 items after scrolling div want to call http request to get next 10 items . Can you please guide me how to do this?

[Ajith Govarthan]

Hi Ibrahim, 

Thanks for contacting Syncfusion forum. 

Based on your reported information you can achieve your requirement using the URL adaptor. In URL Adaptor at the initial load of the grid , the data are fetched from the remote data and bound to the grid using url property of DataManager. 

In your requirement you need to render first 100 records at initial rendering, so we suggest you to define the pageSize as 100 in pageSettings API.  In this case when reaching 100 items via scrolling next 100 items are generated after request comes from server side.  

Please refer to the below code and sample link: 

 

<ejs-grid #grid [dataSource]='data'  [enableInfiniteScrolling]='true'  height='400' [pageSettings]='pageSettings'> 

    <e-columns> 

. . . .  . 

    </e-columns> 

</ejs-grid> 

 

export class FetchDataComponent { 

    public data: any; 

    public pageSettings: object = { pageSize: 100 }; 

 

    ngOnInit(): void { 

        this.data = new DataManager({ 

            url: 'Home/UrlDatasource', 

            adaptor: new UrlAdaptor 

        }); 

    } 

} 

 

Sample link :  https://www.syncfusion.com/downloads/support/forum/154051/ze/server2116247543 

For more information about URL adaptor refer below link. 

https://ej2.syncfusion.com/angular/documentation/grid/edit/?no-cache=1#url-adaptor 

Documentation link : https://ej2.syncfusion.com/angular/documentation/api/grid/pageSettingsModel/#pagesize 

Please get back to us, if you need any further assistance. 

Regards, 

Ajith G.