Adding header and footer in Angular Grid component
23 Sep 202321 minutes to read
The Syncfusion Angular Grid allows you to add customized header and footer sections in the exported PDF document. This feature enables you to include custom text, page numbers, lines, page size, and even change the orientation of the header and footer.
Adding text in header and footer
The Syncfusion Angular Grid allows you to add custom text in the header or footer section in the exported PDF document.
The header section of a PDF document is typically located at the top of each page. It’s a space where you can include additional information or branding elements. This is particularly useful for adding details like a company logo, a title for the document, a date, or any other information that you want to appear consistently on every page of the PDF.
The footer section, on the other hand, is usually positioned at the bottom of each page in the PDF. It’s another area where you can insert custom text. Common content in the footer includes page numbers, copyright information, or disclaimers. Similar to the header, the footer content is repeated on every page.
To add text in 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 demostrates how to add the 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 },
},
]
}Draw a line in header and footer
When exporting data from the Syncfusion Angular Grid to a PDF document, you have an option to add a line in the header and footer section. This feature allows you to enhance the visual appearance of the exported PDF document and create a clear separation between the header and the content.
This can be achieved using the pdfExportProperties property of the Grid. You can customize the line style using different supported line styles listed below:
- Dash
- Dot
- DashDot
- DashDotDot
- Solid
To add a line in the header or footer of the exported PDF document, you can access the header.contents or footer.contents property of the header or footer in the pdfExportProperties property of the grid.
The following code example demostrates how to draw 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 number in header and footer
When exporting data from the Syncfusion Angular Grid to a PDF document, you have an option to include page numbers in the header and footer section. This feature allows you to provide a reference to the page number for better document navigation.
This can be achieved using the pdfExportProperties property of the Grid. You can choose from different types of supported page number 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 in the header or footer of the exported PDF document, you can access the header.contents or footer.contents property of the header or footer in the pdfExportProperties property of the grid.
The following code example demostrates how to add 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 Syncfusion Angular Grid have an option to include an image in the header and footer section when exporting data from the Grid to PDF document. This feature allows you to add a custom logo, branding, or any other relevant image to the exported document.
You can use a base64 string with the .jpeg format to represent the image. 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 your desired image to a base64 string in the .jpeg format.
-
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 how to add a header and footer to the exported grid. In the given example, we added lines in the header and footer, inserted an image in the header, and also added page number in the footer.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import {
GridComponent,
ToolbarItems,
PdfExportProperties,
} from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
import { image } from './image';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, PdfExportService, PageService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PdfExportService, ToolbarService, PageService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);Repeat column header on every page
When exporting data from the Syncfusion Angular Grid to a PDF document, you have an option to repeat the column header on every page. This feature ensures that the column header remains visible and easily identifiable, even when the data spans multiple pages in the exported PDF document.
By default, the column header is occurs only on the first page of the PDF document. However, you can enable the repeatHeader property of the pdfGrid object to true which display the column header on every page. This can be achieved using the pdfHeaderQueryCellInfo event of the Grid.
The following example demonstrates how to repeat the column header on every page of the exported PDF document using the pdfHeaderQueryCellInfo event.
import { Component, OnInit, ViewChild } from '@angular/core';
import { purchaseData} from './datasource';
import { GridComponent, ToolbarItems } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PdfExportService, ToolbarService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);