Angular2 Grid Virtual Scrolling

[Dina Abdelbary]

Hi,

I want a sample for Virtual Scrolling in Syncfusion Grid (using Angular2) not javascript, on-demand loading for adding rows at the event of scrolling.

Using a API method that takes the page number and returns only the records in this page.

Waiting for your response.

Thanks

[Dina Abdelbary]

Any updates, please?

[Saravanan Arunachalam]

Hi Dina, 

Thanks for contacting Syncfusion’s support. 

Based on your requirement, we have created a sample that can be downloaded from the below link. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJGrid901395722  

In that sample, we have performed on-demand paging by enable virtualScrolling and please refer to the below code example. 

appComponent.html  

   

<ej-grid #grid  [dataSource]="gridData" [allowScrolling]=true  

                  [allowPaging]="true"  

                  [query] = "queryorder"> 

             . . .  

</ej-grid>  

   

appComponent.ts  

   

    public gridData = ej.DataManager({  

        url: "http://localhost:49339/Odata",  

        adaptor: new ej.ODataV4Adaptor()     

    });  

    public queryorder = new ej.Query().from('Orders');   

    . . . 

}  

 

 

We have included angular2 sample also with in the project (EJGrid\angular2\ejGrid_Vpaging - Copy\ejGrid_Vpaging)  

Procedure for run the attached sample  

1)     Run the EJGRid Application and note down the LocalHost link (In our case, port number is 49339)  

2)     Run the Angular2 Application Separately   

3)     Use the EJGrid’s port number as Origin for the Angular2 Application and use them as shown below  

Note: Change the path as (http://localhost:49339/angular2/ejGrid_Vpaging%20-%20Copy/ejGrid_Vpaging/)  

Regards, 

Saravanan A.