Print in Angular Grid component
10 Jan 202324 minutes to read
To print the Grid, use the print
method from grid instance. The print option can be displayed on the toolbar
by adding the Print toolbar item.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' [toolbar]='toolbarOptions' height='272px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['Print'];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Page Setup
Some of the print options cannot be configured through JavaScript code. So, you have to customize the layout, paper size, and margin options using the browser page setup dialog. Please refer to the following links to know more about the browser page setup:
Print by external button
To print the grid from an external button, invoke the Print
method.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
template:
`<button ej-button id='print' (click)='print()'>Print</button>
<ejs-grid #grid='' [dataSource]='data' height='280px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
@ViewChild('grid') public gridObj: GridComponent;
ngOnInit(): void {
this.data = data;
}
print() {
this.gridObj.print();
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, PageService } from '@syncfusion/ej2-angular-grids';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Print visible Page
By default, the grid prints all the pages. To print the current page alone, set the printMode
to CurrentPage.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { ToolbarItems, PageSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' printMode='CurrentPage' [allowPaging]='true'
[pageSettings]='pageOptions' [toolbar]='toolbarOptions'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
public pageOptions: PageSettingsModel;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['Print'];
this.pageOptions = { pageSize: 6 };
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, PageService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ToolbarService, PageService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Print the hierarchy grid
By default, the grid will be print the master and expanded child grids alone. you can change the print option by using the hierarchyPrintMode
property. The available options are,
Mode | Behavior |
---|---|
Expanded | Prints the master grid with expanded child grids. |
All | Prints the master grid with all the child grids. |
None | Prints the master grid alone. |
import { Component, OnInit, ViewChild } from '@angular/core';
import { data, employeeData } from './datasource';
import { DetailRowService, GridModel, ToolbarService, GridComponent } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='pData' height='265px' [childGrid]='childGrid' [toolbar]='["Print"]' hierarchyPrintMode='All'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
`,
providers: [DetailRowService, ToolbarService]
})
export class AppComponent implements OnInit {
public pData: object[];
public childGrid: GridModel = {
dataSource: data,
queryString: 'EmployeeID',
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
};
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void {
this.pData = employeeData;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService,
GroupService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Print the master detail grid
The Grid has the option to visualize details of a record in another Grid in a master and detailed manner. By default, Grid will print the master grid alone. Instead of this, it is possible to print both the master and detail grids by using the beforePrint event of the Grid.
In the following sample, the detail grid is added to the element
argument of the beforePrint
event, resulting in both the master and detail grids being printed on the page.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data, customerData } from './datasource';
import { DetailRowService, ToolbarService, GridComponent, ToolbarItems, RowSelectEventArgs } from '@syncfusion/ej2-angular-grids';
type carType = { CustomerID: string, CustomerName: string, ContactName: string };
@Component({
selector: 'app-root',
template: `<ejs-grid #mastergrid id="mastergrid" [dataSource]='masterdata' [selectedRowIndex]="1" [toolbar]='toolbar' (rowSelected)="onRowSelected($event)" (beforePrint)="beforePrint($event)">
<e-columns>
<e-column field='ContactName' headerText='Customer Name' width='150'></e-column>
<e-column field='CompanyName' headerText='Company Name' width='150'></e-column>
<e-column field='Address' headerText='Address' width='150'></e-column>
<e-column field='Country' headerText='Country' width='130'></e-column>
</e-columns>
</ejs-grid>
<div class='e-statustext'>Showing orders of Customer: <b id="key"></b></div>
<ejs-grid #detailgrid id="detailgrid" [dataSource]='data' [allowSelection]='false'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='100'></e-column>
<e-column field='Freight' headerText='Freight' format='C2' width='100' type='number'></e-column>
<e-column field='ShipName' headerText="Ship Name" width='150'></e-column>
<e-column field='ShipCountry' headerText="Ship Country" width='150'></e-column>
<e-column field='ShipAddress' headerText="Ship Address" width='150'></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public names: string[] = ['AROUT', 'BERGS', 'BLONP', 'CHOPS', 'ERNSH'];
public toolbar: ToolbarItems[];
@ViewChild('mastergrid') public mastergrid: GridComponent;
@ViewChild('detailgrid') public detailgrid: GridComponent;
public masterdata: Object[];
ngOnInit(): void {
this.masterdata = customerData.filter((e: carType) => this.names.indexOf(e.CustomerID) !== -1);
this.toolbar = ['Print'];
}
public onRowSelected(args: RowSelectEventArgs): void {
let selectedRecord: carType = args.data as carType;
this.detailgrid.dataSource = data.filter((record: carType) => record.CustomerName === selectedRecord.ContactName).slice(0, 5);
document.getElementById('key').innerHTML = selectedRecord.ContactName;
}
public beforePrint(args): void {
let customEle = document.createElement('div');
customEle.innerHTML = document.getElementsByClassName('e-statustext')[0].innerHTML + this.detailgrid.element.innerHTML;
customEle.appendChild(document.createElement('br'));
args.element.append(customEle);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Print large number of columns
By default, the browser uses A4 as page size option to print pages and to adapt the size of the page the browser print preview will auto-hide the overflowed contents. Hence grid with large number of columns will cut off to adapt the print page.
To show large number of columns when printing, adjust the scale option from print option panel based on your content size.
Show or Hide columns while Printing
You can show a hidden column or hide a visible column while printing the grid using toolbarClick
and printComplete
events.
In the toolbarClick
event, based on args.item.id as grid_print. We can show or hide columns by setting column.visible
property to true or false respectively.
In the printComplete event, We have reversed the state back to the previous state.
In the below example, we have CustomerID as a hidden column in the grid. While printing, we have changed CustomerID to visible column and ShipCity as hidden column.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { ToolbarItems, PageSettingsModel, GridComponent, Column } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' (toolbarClick)='toolbarClick()' (printComplete)='printComplete()'
[allowPaging]='true' [pageSettings]='pageOptions' [toolbar]='toolbarOptions'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' [visible]= 'false' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
public pageOptions: PageSettingsModel;
@ViewChild('grid') public grid: GridComponent;
toolbarClick() {
for (const columns of this.grid.columns) {
if ((columns as Column).field === 'CustomerID') {
(columns as Column).visible = true;
} else if ((columns as Column).field === 'ShipCity') {
(columns as Column).visible = false;
}
}
}
printComplete() {
for (const columns of this.grid.columns) {
if ((columns as Column).field === 'CustomerID') {
(columns as Column).visible = false;
} else if ((columns as Column).field === 'ShipCity') {
(columns as Column).visible = true;
}
}
}
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['Print'];
this.pageOptions = { pageSize: 6 };
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, PageService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ToolbarService, PageService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Limitations of Printing Large Data
When grid contains large number of data, printing all the data at once is not a best option for the browser performance. Because to render all the DOM elements in one page will produce performance issues in the browser. It leads to browser slow down or browser hang. Grid have option to handle large number of data by Virtualization. However while printing, it is not possible to use virtualization for rows and columns.
If printing of all the data is still needed, we suggest to Export the grid to Excel
or CSV
or Pdf
and then print it from another non-web based application.