Search results

Adding Header and Footer in Angular Grid component

24 May 2022 / 4 minutes to read

You can customize text, page number, line, page size and changing orientation in header and footer.

You can add text either in Header or Footer of exported PDF document using pdfExportProperties.

Copied to clipboard
const exportProperties: PdfExportProperties = {
    header: {
        fromTop: 0,
        height: 130,
        contents: [
            {
                type: 'Text',
                value: "Northwind Traders",
                position: { x: 0, y: 50 },
                style: { textBrushColor: '#000000', fontSize: 13 }
            },
        ]
    }

you can add line either in Header or Footer of the exported PDF document.

Supported line styles:

  • Dash
  • Dot
  • DashDot
  • DashDotDot
  • Solid
Copied to clipboard
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 }
        }
    ]
}
}

you can add page number either in Header or Footer of exported PDF document.

Supported page number types:

  • LowerLatin - a, b, c,
  • UpperLatin - A, B, C,
  • LowerRoman - i, ii, iii,
  • UpperRoman - I, II, III,
  • Number - 1,2,3.
Copied to clipboard
 const exportProperties: PdfExportProperties = {
header: {
    fromTop: 0,
    height: 130,
    contents: [
        {
            type: 'PageNumber',
            pageNumberType: 'Arabic',
            format: 'Page {$current} of {$total}', //optional
            position: { x: 0, y: 25 },
            style: { textBrushColor: '#ffff80', fontSize: 15, hAlign: 'Center' }
        }
    ]
}
}

Image (Base64 string with .jpeg format) can be added in the exported document in header/footer using the pdfExportProperties.

Copied to clipboard
const exportProperties: PdfExportProperties = {
header: {
    fromTop: 0,
    height: 130,
    contents: [
        {
            type: 'Image',
            src: image,
            position: { x: 40, y: 10 },
            size: { height: 100, width: 250 },
        }
    ]
}
}

The below code illustrates the pdf export customization.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
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' [toolbar]='toolbarOptions' height='272px'
          [allowPaging]='true' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'>
            <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[];
@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: 'Image',
                        src: image,
                        position: { x: 40, y: 10 },
                        size: { height: 100, width: 250 },
                    }
                ]
            },
            footer: {
                fromBottom: 160,
                height: 150,
                contents: [
                    {
                        type: 'PageNumber',
                        pageNumberType: 'Arabic',
                        format: 'Page {$current} of {$total}',
                        position: { x: 0, y: 25 },
                        style: { textBrushColor: '#ffff80', fontSize: 15 }
                    }
                ]
            }
        };
        this.grid.pdfExport(pdfExportProperties);
    }
}
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Repeat column header on every page

By default, column header will be placed on the first page of the pdf document but you can display column header on every page using repeatHeader property of pdfGrid.

In the below sample, we have enabled repeatHeader property in pdfHeaderQueryCellInfo event to show the header on every page.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
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=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='Freight' headerText='Freight' 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[];
@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.pdfExport();
    }
}

pdfHeaderQueryCellInfo(args: any): void {
     args.cell.row.pdfGrid.repeatHeader = true;
}

}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);