Adding Header and Footer in Angular Grid Component
The Angular Data Grid enables customized header and footer sections to be added in exported PDF documents. This feature supports custom text, page numbers, lines, page size configuration, and orientation changes for header and footer sections.
Adding text in header and footer
The Angular Data Grid supports adding custom text to the header or footer sections of exported PDF documents.
The header section of a PDF document is positioned at the top of each page and provides a space for additional information or branding elements such as company logos, document titles, dates, or other information that repeats consistently across every page.
The footer section is positioned at the bottom of each page and serves as an area for custom text content. Common footer content includes page numbers, copyright information, and disclaimers, with footer content repeated on every page similar to the header.
To add text to the header or footer of the exported PDF document, follow these steps:
- Access the pdfExportProperties of the Grid component.
- Set the header or footer property to a string value representing the desired text.
- Trigger the PDF export operation.
The following code example demonstrates adding a header in the exported PDF document.
const exportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Text',
value: 'Exported Document Of Customers',
position: { x: 200, y: 50 },
style: { textBrushColor: '#000000', fontSize: 20 },
},
]
}
}Drawing a line in header and footer
Line elements can be added to the header and footer sections of exported PDF documents. This feature creates clear visual separation between the header/footer and the main content, enhancing document structure and readability.
This can be achieved using the pdfExportProperties property of the Grid. Line styles can be customized using the supported dash styles listed below:
DashDotDashDotDashDotDotSolid
To add a line in the header or footer of the exported PDF document, access the header.contents or footer.contents property of the header or footer in the pdfExportProperties property of the Grid.
The following code example demonstrates drawing a line in the header of the exported PDF document.
const exportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Line',
style: { penColor: '#000080', penSize: 2, dashStyle: 'Solid' },
points: { x1: 0, y1: 4, x2: 685, y2: 4 },
}
]
},
footer: {
fromBottom: 10,
height: 60,
contents: [
{
type: 'Line',
style: { penColor: '#000080', penSize: 2, dashStyle: 'Dot' },
points: { x1: 0, y1: 4, x2: 685, y2: 4 },
},
],
},
}Add page numbers in header and footer
Page numbers can be included in the header and footer sections of exported PDF documents. This feature provides page references for better document navigation and readability.
This can be achieved using the pdfExportProperties property of the Grid. Different page number types are supported as listed below:
-
LowerLatin- a, b, c -
UpperLatin- A, B, C -
LowerRoman- i, ii, iii -
UpperRoman- I, II, III -
Number- 1, 2, 3 -
Arabic- 1, 2, 3
To add a page number to the header or footer of the exported PDF document, access the header.contents or footer.contents property of the header or footer in the pdfExportProperties property of the Grid.
The following code example demonstrates adding a page number in the footer of the exported PDF document.
const exportProperties: PdfExportProperties = {
footer: {
fromBottom: 10,
height: 60,
contents: [
{
type: 'PageNumber',
pageNumberType: 'Arabic',
format: 'Page {$current} of {$total}', // Optional
position: { x: 0, y: 25 },
style: { textBrushColor: '#4169e1', fontSize: 15, hAlign: 'Center' }
}
]
}
}Insert an image in header and footer
The Angular Data Grid supports inclusion of images in the header and footer sections of exported PDF documents. This feature enables addition of custom logos, branding elements, or other relevant images to enhance document presentation.
Images can be represented using base64 strings in .jpeg format. This can be achieved using the pdfExportProperties property of the Grid component.
To insert an image in the header or footer of the exported PDF document, follow these steps:
-
Convert the desired image to a base64 string in the
.jpegformat. -
Access the
pdfExportPropertiesof the Grid component. -
Set the
header.contents.srcproperty to the respective file of the image or the base64 string of the image. -
Trigger the PDF export operation.
const exportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Image',
src: image,
position: { x: 40, y: 10 },
size: { height: 100, width: 150 },
},
]
}
}The following example demonstrates adding a header and footer to the exported grid. In the given example, lines are added in the header and footer, an image is inserted in the header, and a page number is added in the footer.
import { data } from './datasource';
import { image } from './image';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridModule, PageService, PdfExportService, ToolbarService, GridComponent, ToolbarItems, PdfExportProperties, } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
imports: [ GridModule ],
providers: [PdfExportService, ToolbarService, PageService],
standalone: true,
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [allowPaging]='true' [toolbar]='toolbarOptions'
height='220px' [allowPaging]='true' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
<e-column field='ShipCity' headerText='Ship City' width=110></e-column>
<e-column field='ShipName' headerText='Ship Name' width=120></e-column>
</e-columns>
</ejs-grid>`,
})
export class AppComponent implements OnInit {
public data?: object[];
public toolbarOptions?: ToolbarItems[];
@ViewChild('grid') public grid?: GridComponent;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['PdfExport'];
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_pdfexport') {
// 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
const pdfExportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Line',
style: { penColor: '#000080', penSize: 2, dashStyle: 'Solid' },
points: { x1: 0, y1: 4, x2: 685, y2: 4 },
},
{
type: 'Text',
value: 'Exported Document Of Customers',
position: { x:200, y: 50 },
style: { textBrushColor: '#000000', fontSize: 20 },
},
{
type: 'Image',
src: image,
position: { x: 40, y: 10 },
size: { height: 100, width: 150 },
},
],
},
footer: {
fromBottom: 10,
height: 60,
contents: [
{
type: 'PageNumber',
pageNumberType: 'Arabic',
format: 'Page {$current} of {$total}', //optional
position: { x: 0, y: 25 },
style: {
textBrushColor: '#4169e1',
fontSize: 15,
hAlign: 'Center',
},
},
{
type: 'Line',
style: { penColor: '#000080', penSize: 2, dashStyle: 'Dot' },
points: { x1: 0, y1: 4, x2: 685, y2: 4 },
},
],
},
};
(this.grid as GridComponent).pdfExport(pdfExportProperties);
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Repeat column headers on every page
The column header can be repeated on every page of an exported PDF document. This feature ensures that the column header remains visible and easily identifiable, even when data spans multiple pages in the exported PDF document.
By default, the column header appears only on the first page of the PDF document. Enabling the repeatHeader property of the pdfGrid object to true to display the column header on every page. This behavior can be implemented using the pdfHeaderQueryCellInfo event of the Grid.
The following example demonstrates repeating the column header on every page of the exported PDF document using the pdfHeaderQueryCellInfo event.
import { purchaseData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
imports: [GridModule ],
providers: [PdfExportService, ToolbarService],
standalone: true,
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px'
[allowPdfExport]='true' (pdfHeaderQueryCellInfo)='pdfHeaderQueryCellInfo($event)' (toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
<e-column field='Freight' headerText='Freight' width=80></e-column>
<e-column field='ShipName' headerText='Ship Name' width=120></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data?: object[];
public toolbarOptions?: ToolbarItems[];
@ViewChild('grid')
public grid?: GridComponent;
ngOnInit(): void {
this.data = purchaseData;
this.toolbarOptions = ['PdfExport'];
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_pdfexport') {
(this.grid as GridComponent).pdfExport();
}
}
pdfHeaderQueryCellInfo(args: PdfHeaderQueryCellInfoEventArgs): void {
if (args.cell && args.cell.row && args.cell.row.pdfGrid) {
args.cell.row.pdfGrid.repeatHeader = true;
}
}
}
interface PdfHeaderQueryCellInfoEventArgs {
cell?: {
row?: {
pdfGrid?: {
repeatHeader?: boolean;
};
};
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));