How to export current data bind with Grid

Question

I am using following code for RemoteData binding and virtualization. I have set pagesize to 30 and total records in database is 100. On initialization of page, it fetch 30 records from server and bind correctly. When I start scroll, it binds another 30 records. So now my grid has 60 records. I want to export these 60 records. How to achieve this?

app.component.html:
-----------------------------------------
<ejs-grid #grid [dataSource]='indexes | async' [enableVirtualization]='true' (dataStateChange)='dataStateChange($event)'
    [pageSettings]='pageOptions' height='500'>
</ejs-grid>

app.component.ts:

ngOnInit(): void {
    this.pageOptions = { pageSize: 30 };
    const state = { skip: 0, take: 30 };
    this.indexService.execute(state);
}

dataStateChange(state: DataStateChangeEventArgs): void {
    console.log(state);
    this.indexService.execute(state);
}

Rajapandiyan Settu · Accepted Answer

Hi Pranav, 

Greetings from syncfusion support. 

Query : On initialization of page, it fetch 30 records from server and bind correctly. When I start scroll, it binds another 30 records. So now my grid has 60 records. I want to export these 60 records. How to achieve this? 

we have analyzed your query and understood that you need to export only the visited page records from your Grid. By default, when using observables for Grid data binding then it exports current page records only. If you want to export only the visited page or some specific records, define the dataSource in exportProperties as follows, 





  public toolbarClick(args): any { 
    if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name 
      args.cancel = true;  // prevent default exporting 

      let state1 = { skip: 0, take: (this.grid.pageSettings.currentPage * this.grid.pageSettings.pageSize) }; // calulate viewed page records count 
      this.service.getData(state1).subscribe((e) => { 
        // get the viewed page records from the service 
        let pdfExportProperties: any = { 
          dataSource: (e as any).result  // assign result to data source property 
        }; 
        this.grid.pdfExport(pdfExportProperties); // export specific page records 
      }); 
    } 
  } 


Sample : https://stackblitz.com/edit/angular-virtual-scroll-custombinding-dkrvqq?file=app.component.ts 

UG : https://ej2.syncfusion.com/angular/documentation/grid/observables/#how-to-export-all-records-with-async-pipe 

Please get back to us if you need further assistance on this. 

Regards, 
Rajapandiyan S