Adding header and footer in EJ2 TypeScript Grid control

5 Jun 202424 minutes to read

The Syncfusion EJ2 TypeScript 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 EJ2 TypeScript 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 control.
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.

let 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 EJ2 TypeScript 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.

let 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 EJ2 TypeScript 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.

 let 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 EJ2 TypeScript 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 control.

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 pdfExportProperties of the Grid control.
Set the header.contents.src property to the respective file of the image or the base64 string of the image.
Trigger the PDF export operation.

let 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.

index.ts
index.html
import { Grid, Page, Toolbar, PdfExport, PdfExportProperties, ClickEventArgs } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
import { image } from './image.ts';

Grid.Inject(Page, Toolbar, PdfExport);

let grid: Grid = new Grid({
    dataSource: data,
    allowPaging: true,
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 100 },
        { field: 'ShipCity', headerText: 'Ship City', width: 110 },
        { field: 'ShipName', headerText: 'Ship Name', width: 120 }
    ],
    height: 230
});
grid.appendTo('#Grid');
grid.toolbarClick = (args: ClickEventArgs) => {
    if (args['item'].id === 'Grid_pdfexport') {
        // 'Grid_pdfexport' -> Grid control id + _ + toolbar item name
        let 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 },
                      },
                    ],
                  },
        };
        grid.pdfExport(pdfExportProperties);
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Grid'></div>
    </div>
</body>
</html>

Repeat column header on every page

When exporting data from the Syncfusion EJ2 TypeScript 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.

index.ts
index.html
import { Grid, Toolbar, Page, PdfExport, ClickEventArgs } from '@syncfusion/ej2-grids';
import { purchaseData } from './datasource.ts';

Grid.Inject(Page, Toolbar, PdfExport);

let grid: Grid = new Grid({
    dataSource: purchaseData,
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 100 },
        { field: 'Freight', headerText: 'Freight', width: 80 },
        { field: 'ShipName', headerText: 'Ship Name', width: 120 }
    ],
    height: 230,
});
grid.appendTo('#Grid');

grid.toolbarClick = (args: ClickEventArgs) => {
    if (args['item'].id === 'Grid_pdfexport') {
        grid.pdfExport();
    }
}

grid.pdfHeaderQueryCellInfo = (args: PdfHeaderQueryCellInfoEventArgs) => {
    if (args.cell && args.cell.row && args.cell.row.pdfGrid) {
        args.cell.row.pdfGrid.repeatHeader = true;
    }
}

interface PdfHeaderQueryCellInfoEventArgs {
    cell?: {
        row?: {
            pdfGrid?: {
                repeatHeader?: boolean;
            };
        };
    };
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Grid'></div>
    </div>
</body>
</html>