How to export and print the entire Grid data by using Async or Custom data binding feature in Grid?

[Mohammed Farook J]

Hi All,

Thanks for contacting Syncfusion support.

While using Custom or Async data binding in Grid. It will get only current page data when exporting the Grid. This is the default behavior. If you want to export the entire data of Grid by using the following way.

[app.component.html]

<ejs-grid [dataSource]='data | async' (beforePrint)='beforePrint($event)' (printComplete)='printComplete($event)' (excelExportComplete)="exportComplete($event)" (pdfExportComplete)="exportComplete($event)" #grid [allowExcelExport]='true' [allowPdfExport]='true' [toolbar]='toolbarOptions' allowPaging='true' [pageSettings]='pageOptions' (toolbarClick)='toolbarClick($event)' (dataStateChange)='dataStateChange($event)'>

<e-columns>

<e-column field="OrderID" headerText="Order ID" width="130">e-column>

<e-column field="CustomerID" headerText="Customer Name" width="150">e-column>

<e-column field="ShipName" headerText="Ship Name" width="200">e-column>

<e-column field="ShipCity" headerText="Ship City" width="150">e-column>

e-columns>

ejs-grid>

[app.component.ts]

import { Component, OnInit, Inject, ViewChild } from "@angular/core";

import { Observable } from "rxjs";

import { OrdersService } from "./order.service";

import {

DataStateChangeEventArgs,

PdfExportProperties,

ExcelExportProperties,

ToolbarItems,

IFilter,

Filter

} from "@syncfusion/ej2-grids";

import { GridComponent } from "@syncfusion/ej2-angular-grids";

import { ClickEventArgs } from "@syncfusion/ej2-navigations";

@Component({

selector: "app-root",

templateUrl: "app.component.html",

providers: [OrdersService]

})

export class AppComponent {

public data: Observable;

public pageOptions: Object;

public count = 0;

public printData: Object[];

@ViewChild("grid", { static: true })

public grid: GridComponent;

public state: DataStateChangeEventArgs;

public toolbarOptions: ToolbarItems[];

constructor(public service: OrdersService) {

this.data = service;

}

public dataStateChange(state: DataStateChangeEventArgs): void {

this.service.execute(state);

}

printGridQueryCellInfo (e) {

e.printgrid.dataSource.result = this.printData;

}

exportComplete(e) {

this.grid.hideSpinner(); // hide the spinner when export completed

}

public ngOnInit(): void {

this.grid.on('printGrid-Init', this.printGridQueryCellInfo, this);

this.pageOptions = { pageSize: 10, pageCount: 4 };

this.toolbarOptions = ["ExcelExport", "PdfExport", "Print"];

let state = { skip: 0, take: 10 };

this.service.execute(state);

}

toolbarClick(args: ClickEventArgs): void {

let state: any = { action: {}, skip: 0, take: this.grid.pageSettings.totalRecordsCount };

let result = {};

switch (args.item.text) {

case "PDF Export":

this.grid.showSpinner(); // show the spinner when send the post to service

state.action.isPdfExport = true;

// fetch the entire data while PDF exporting

this.service.getData(state).subscribe((e: any) => {

let pdfExportProperties: PdfExportProperties = {

dataSource: e.result ? e.result : result

};

this.grid.pdfExport(pdfExportProperties); // need to call pdfExport method of grid when get the entire data

});

break;

case "Excel Export":

// fetch the entire data while Excel exporting

this.grid.showSpinner();// show the spinner when send the post to service

state.action.isExcelExport = true;

this.service.getData(state).subscribe((e: any) => {

let excelExportProperties: ExcelExportProperties = {

dataSource: e.result ? e.result : result

};

this.grid.excelExport(excelExportProperties);// need to call excelExport method of grid when get the entire data

});

break;

case "Print":

args.cancel = true;

this.grid.showSpinner();// show the spinner when send the post to service

// fetch the entire data while printing

this.service.getData(state).subscribe((e: any) => {

this.printData = e.result;

this.grid.print(); // need to call print method of grid when get the entire data

});

break;

}

}

printComplete() {

this.printData = [];

this.grid.off('printGrid-Init', this.printGridQueryCellInfo);

this.grid.hideSpinner();// hide the spinner when print completed

}

}

Find the above code example to fetching the data using toolbarClick event of Grid by based on the exporting or printing options. You need to call the Grid export and print method after fetching the data.

Please find the sample for your reference.

Sample: https://stackblitz.com/edit/angular-267247-pdfexcelexport-print-custom-modifed-94paxk?file=app.component.ts

Regards,

J Mohammed Farook